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

@push('styles')
<style>
.report-nav .btn { border-radius: 20px; font-size: .85rem; }
.report-nav .btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
</style>
@endpush

@section('content')

{{-- Report Nav --}}
<div class="d-flex gap-2 mb-4 flex-wrap report-nav">
    <a href="{{ route('admin.reports.sales') }}" class="btn btn-primary btn-sm active">
        <i class="bi bi-graph-up me-1"></i>বিক্রয়
    </a>
    <a href="{{ route('admin.reports.stock') }}" class="btn btn-outline-warning btn-sm">
        <i class="bi bi-fire me-1"></i>স্টক
    </a>
    <a href="{{ route('admin.reports.due-customers') }}" class="btn btn-outline-danger btn-sm">
        <i class="bi bi-exclamation-circle me-1"></i>বকেয়া গ্রাহক
    </a>
    <a href="{{ route('admin.reports.delivery') }}" class="btn btn-outline-info btn-sm">
        <i class="bi bi-bicycle me-1"></i>ডেলিভারি
    </a>
</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-2">
                <label class="form-label small fw-semibold">পিরিয়ড</label>
                <select name="period" class="form-select form-select-sm">
                    <option value="daily"   {{ $period === 'daily'   ? 'selected' : '' }}>দৈনিক</option>
                    <option value="monthly" {{ $period === 'monthly' ? 'selected' : '' }}>মাসিক</option>
                    <option value="yearly"  {{ $period === 'yearly'  ? 'selected' : '' }}>বার্ষিক</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold">শুরুর তারিখ</label>
                <input type="date" name="date_from" value="{{ $dateFrom->format('Y-m-d') }}" class="form-control form-control-sm">
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold">শেষ তারিখ</label>
                <input type="date" name="date_to" value="{{ $dateTo->format('Y-m-d') }}" class="form-control form-control-sm">
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search"></i></button>
            </div>
            <div class="col-md-auto ms-auto d-flex gap-2">
                {{-- Quick range buttons --}}
                <a href="{{ route('admin.reports.sales', ['period'=>'daily','date_from'=>now()->format('Y-m-d'),'date_to'=>now()->format('Y-m-d')]) }}"
                   class="btn btn-outline-secondary btn-sm">আজ</a>
                <a href="{{ route('admin.reports.sales', ['period'=>'daily','date_from'=>now()->startOfWeek()->format('Y-m-d'),'date_to'=>now()->format('Y-m-d')]) }}"
                   class="btn btn-outline-secondary btn-sm">এই সপ্তাহ</a>
                <a href="{{ route('admin.reports.sales', ['period'=>'daily','date_from'=>now()->startOfMonth()->format('Y-m-d'),'date_to'=>now()->format('Y-m-d')]) }}"
                   class="btn btn-outline-secondary btn-sm">এই মাস</a>
            </div>
        </form>
    </div>
</div>

{{-- Summary Cards --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card stat-card text-center py-3 border-start border-4 border-primary">
            <i class="bi bi-cart3 text-primary fs-3 mb-1"></i>
            <div class="fs-2 fw-bold">{{ number_format($summary->total_orders ?? 0) }}</div>
            <div class="small text-muted">মোট অর্ডার</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card stat-card text-center py-3 border-start border-4 border-success">
            <i class="bi bi-cash-stack text-success fs-3 mb-1"></i>
            <div class="fs-2 fw-bold text-success">৳{{ number_format($summary->total_sales ?? 0, 0) }}</div>
            <div class="small text-muted">মোট বিক্রয়</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card stat-card text-center py-3 border-start border-4 border-info">
            <i class="bi bi-check-circle-fill text-info fs-3 mb-1"></i>
            <div class="fs-2 fw-bold text-info">৳{{ number_format($summary->total_collected ?? 0, 0) }}</div>
            <div class="small text-muted">আদায়কৃত</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card stat-card text-center py-3 border-start border-4 border-danger">
            <i class="bi bi-exclamation-circle text-danger fs-3 mb-1"></i>
            <div class="fs-2 fw-bold text-danger">৳{{ number_format($summary->total_due ?? 0, 0) }}</div>
            <div class="small text-muted">বকেয়া</div>
        </div>
    </div>
</div>

{{-- Sales Chart --}}
<div class="card stat-card mb-4">
    <div class="card-header bg-white border-0 pt-3">
        <h6 class="fw-semibold mb-0"><i class="bi bi-graph-up text-primary me-2"></i>বিক্রয় চার্ট</h6>
    </div>
    <div class="card-body">
        <canvas id="salesChart" height="100"></canvas>
    </div>
</div>

<div class="row g-4 mb-4">
    {{-- Payment Method Breakdown --}}
    <div class="col-md-5">
        <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-pie-chart text-success me-2"></i>পেমেন্ট পদ্ধতি</h6>
            </div>
            <div class="card-body">
                @if($paymentBreakdown->count() > 0)
                <canvas id="paymentChart" height="160"></canvas>
                <div class="mt-3">
                    @foreach($paymentBreakdown as $pm)
                    @php
                        $labels = ['cash'=>'নগদ','bkash'=>'বিকাশ','nagad'=>'নগদ','rocket'=>'রকেট','bank'=>'ব্যাংক','credit'=>'ক্রেডিট'];
                        $colors = ['cash'=>'success','bkash'=>'danger','nagad'=>'warning','rocket'=>'secondary','bank'=>'primary','credit'=>'dark'];
                    @endphp
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <span class="badge bg-{{ $colors[$pm->method] ?? 'secondary' }} me-2">{{ $labels[$pm->method] ?? $pm->method }}</span>
                            <small class="text-muted">{{ $pm->count }}টি</small>
                        </div>
                        <span class="fw-bold">৳{{ number_format($pm->total, 0) }}</span>
                    </div>
                    @endforeach
                </div>
                @else
                    <p class="text-muted text-center py-3">কোনো পেমেন্ট নেই।</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Top Products --}}
    <div class="col-md-7">
        <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-fire text-warning me-2"></i>সিলিন্ডার বিক্রয় (টাইপ অনুযায়ী)</h6>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr><th>টাইপ</th><th class="text-center">পরিমাণ</th><th class="text-end">মোট</th></tr>
                    </thead>
                    <tbody>
                        @forelse($topProducts as $prod)
                        <tr>
                            <td class="fw-semibold">{{ $prod->name }}</td>
                            <td class="text-center"><span class="badge bg-primary rounded-pill">{{ $prod->total_qty }}</span></td>
                            <td class="text-end fw-bold text-success">৳{{ number_format($prod->total_amount, 0) }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="3" class="text-center text-muted py-3">কোনো ডেটা নেই।</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Top Customers --}}
<div class="card stat-card mb-4">
    <div class="card-header bg-white border-0 pt-3">
        <h6 class="fw-semibold mb-0"><i class="bi bi-trophy text-warning me-2"></i>শীর্ষ গ্রাহক</h6>
    </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>#</th><th>গ্রাহক</th><th class="text-center">অর্ডার</th><th class="text-end">মোট ক্রয়</th></tr>
                </thead>
                <tbody>
                    @forelse($topCustomers as $i => $tc)
                    <tr>
                        <td>
                            @if($i < 3)
                                <span class="badge rounded-pill bg-{{ ['warning','secondary','primary'][$i] }}">{{ $i+1 }}</span>
                            @else
                                <span class="text-muted">{{ $i+1 }}</span>
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('admin.customers.show', $tc->customer_id) }}" class="text-decoration-none fw-semibold">
                                {{ $tc->customer?->name }}
                            </a>
                            <small class="text-muted d-block">{{ $tc->customer?->phone }}</small>
                        </td>
                        <td class="text-center">{{ $tc->order_count }}</td>
                        <td class="text-end fw-bold text-success">৳{{ number_format($tc->total, 0) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="text-center text-muted py-3">কোনো ডেটা নেই।</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Orders Table --}}
<div class="card stat-card">
    <div class="card-header bg-white border-0 pt-3">
        <h6 class="fw-semibold mb-0"><i class="bi bi-table text-muted me-2"></i>অর্ডার তালিকা</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle small">
                <thead class="table-light">
                    <tr><th>অর্ডার নং</th><th>গ্রাহক</th><th>মোট</th><th>পেমেন্ট</th><th>স্ট্যাটাস</th><th>তারিখ</th></tr>
                </thead>
                <tbody>
                    @forelse($orders as $order)
                    <tr>
                        <td><a href="{{ route('admin.orders.show', $order) }}" class="fw-semibold text-decoration-none">{{ $order->order_number }}</a></td>
                        <td>{{ $order->customer->name }}</td>
                        <td>৳{{ number_format($order->total_amount, 0) }}</td>
                        <td><span class="badge bg-{{ $order->payment_status_color }}">{{ $order->payment_status_label }}</span></td>
                        <td><span class="badge bg-{{ $order->status_color }}">{{ $order->status_label }}</span></td>
                        <td class="text-muted">{{ $order->created_at->format('d M Y') }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center text-muted py-4">কোনো অর্ডার নেই।</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($orders->hasPages())
        <div class="card-footer bg-white border-0">{{ $orders->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>
const labels  = @json($chartLabels);
const sales   = @json($chartSales);
const paid    = @json($chartPaid);
const ordersC = @json($chartOrders);

// Sales Chart
new Chart(document.getElementById('salesChart'), {
    type: 'bar',
    data: {
        labels,
        datasets: [
            { label: 'মোট বিক্রয় (৳)', data: sales, backgroundColor: 'rgba(13,110,253,.2)', borderColor: '#0d6efd', borderWidth: 2, type: 'bar' },
            { label: 'আদায়কৃত (৳)',    data: paid,  backgroundColor: 'rgba(25,135,84,.15)', borderColor: '#198754', borderWidth: 2, type: 'line', tension: .4, fill: false },
        ]
    },
    options: { responsive: true, plugins: { legend: { position: 'top' } }, scales: { y: { beginAtZero: true } } }
});

// Payment Pie
@if($paymentBreakdown->count() > 0)
const pmLabels = @json($pmChartLabels);
const pmData   = @json($pmChartData);
new Chart(document.getElementById('paymentChart'), {
    type: 'doughnut',
    data: { labels: pmLabels, datasets: [{ data: pmData, backgroundColor: ['#198754','#dc3545','#ffc107','#6c757d','#0d6efd','#212529'] }] },
    options: { responsive: true, plugins: { legend: { position: 'right' } } }
});
@endif
</script>
@endpush