@extends('master.app')
@section('title', 'Customer Overview')

@section('pageCSS')
    <style>
        .page-card {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(2, 6, 23, .06);
            background: #fff;
        }

        .soft-box {
            background: rgba(13, 110, 253, .06);
            border-radius: 16px;
            padding: 14px;
        }

        .kpi {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(2, 6, 23, .06);
            background: #fff;
            height: 100%;
        }

        .kpi .kpi-title {
            font-size: 12px;
            color: #64748b;
        }

        .kpi .kpi-value {
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
        }

        .kpi small {
            color: #94a3b8;
        }

        .table td,
        .table th {
            vertical-align: middle !important;
        }

        .mini-title {
            font-weight: 700;
            color: #0f172a;
        }
    </style>
@endsection

@section('body')
    <main class="app-content">
        <section>
            <div class="card page-card">

                {{-- Header --}}
                <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h4 class="mb-0">{{ $customer->name }}</h4>
                        <small class="text-muted">
                            {{ $customer->phone }} • {{ $customer->address }}
                        </small>
                    </div>

                    <div class="btn-group" role="group">
                        {{-- <a href="{{ route('customer_single.bill_index', $customer->id) }}"
                            class="btn btn-sm btn-primary btn-rounded">
                            <i class="fa fa-file-text"></i> Invoices
                        </a>
                        <a href="{{ route('customer_single_received.index', $customer->id) }}"
                            class="btn btn-sm btn-primary btn-rounded">
                            <i class="fa fa-money"></i> Received
                        </a> --}}
                        <a href="{{ route('customers.profile_print', $customer->id) }}"
                            class="btn btn-sm btn-dark btn-rounded">
                            <i class="fa fa-print"></i> Print
                        </a>
                    </div>
                </div>

                <div class="card-body">

                    {{-- KPI Cards --}}
                    <div class="soft-box mb-3">
                        <div class="row g-3">

                            {{-- Total Sale --}}
                            <div class="col-md-3">
                                <div class="card kpi">
                                    <div class="card-body">
                                        <div class="kpi-title">Total Sale</div>
                                        @foreach ($currencies as $c)
                                            <div class="kpi-value">
                                                {{ $c->title_en }}
                                                {{ number_format((float) ($saleTotals[$c->id] ?? 0), 2) }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Total Received --}}
                            <div class="col-md-3">
                                <div class="card kpi">
                                    <div class="card-body">
                                        <div class="kpi-title">Total Received</div>
                                        @foreach ($currencies as $c)
                                            <div class="kpi-value">
                                                {{ $c->title_en }}
                                                {{ number_format((float) ($receivedTotals[$c->id] ?? 0), 2) }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Total Advance --}}
                            <div class="col-md-3">
                                <div class="card kpi">
                                    <div class="card-body">
                                        <div class="kpi-title">Total Advance</div>
                                        @foreach ($currencies as $c)
                                            <div class="kpi-value">
                                                {{ $c->title_en }}
                                                {{ number_format((float) ($advanceTotals[$c->id] ?? 0), 2) }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Balance --}}
                            <div class="col-md-3">
                                <div class="card kpi">
                                    <div class="card-body">
                                        <div class="kpi-title">Balance</div>
                                        @foreach ($currencies as $c)
                                            @php
                                                $sale = (float) ($saleTotals[$c->id] ?? 0);
                                                $recv = (float) ($receivedTotals[$c->id] ?? 0);
                                                $adv = (float) ($advanceTotals[$c->id] ?? 0);
                                                $bal = $sale - ($recv + $adv);
                                            @endphp
                                            <div class="kpi-value">
                                                {{ $c->title_en }} {{ number_format($bal, 2) }}
                                            </div>
                                        @endforeach
                                        <small>Balance = Sale - (Received + Advance)</small>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    {{-- Recent Transactions Overview --}}
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Recent Invoices</span>
                                    <small class="text-muted">Last 8</small>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Date</th>
                                                    <th>Title</th>
                                                    <th class="text-end">Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($recentBills as $i => $r)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $r->invoice_date ?? ($r->date ?? '-') }}</td>
                                                        <td>{{ $r->title ?? '-' }}</td>
                                                        <td class="text-end">
                                                            {{ number_format((float) ($r->final_amount ?? ($r->grand_total ?? 0)), 2) }}
                                                            {{ optional($r->currency)->title_en ?? '' }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No data</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Recent Received</span>
                                    <small class="text-muted">Last 8</small>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Date</th>
                                                    <th>Ref</th>
                                                    <th class="text-end">Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($recentReceived as $i => $r)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $r->date ?? '-' }}</td>
                                                        <td>{{ $r->recieved_number ?? ($r->details ?? '-') }}</td>
                                                        <td class="text-end">
                                                            {{ number_format((float) ($r->amount ?? 0), 2) }}
                                                            {{ optional($r->currency)->title_en ?? '' }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No data</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Recent Advance</span>
                                    <small class="text-muted">Last 8</small>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Date</th>
                                                    <th>Title</th>
                                                    <th class="text-end">Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($recentAdvance as $i => $r)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $r->date ?? '-' }}</td>
                                                        <td>{{ $r->title ?? '-' }}</td>
                                                        <td class="text-end">
                                                            {{ number_format((float) ($r->amount ?? 0), 2) }}
                                                            {{ optional($r->currency)->title_en ?? '' }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No data</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Recent Return</span>
                                    <small class="text-muted">Last 8</small>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Date</th>
                                                    <th>Title</th>
                                                    <th class="text-end">Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($recentReturn as $i => $r)
                                                    <tr>
                                                        <td>{{ $i + 1 }}</td>
                                                        <td>{{ $r->invoice_date ?? ($r->date ?? '-') }}</td>
                                                        <td>{{ $r->title ?? '-' }}</td>
                                                        <td class="text-end">
                                                            {{ number_format((float) ($r->amount ?? 0), 2) }}
                                                            {{ optional($r->currency)->title_en ?? '' }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4" class="text-center text-muted">No data</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    {{-- Charts --}}
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Sale (Monthly)</span>
                                    <small class="text-muted">Last 12 months</small>
                                </div>
                                <div class="card-body">
                                    <canvas id="chartSale" height="120"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Received (Monthly)</span>
                                    <small class="text-muted">Last 12 months</small>
                                </div>
                                <div class="card-body">
                                    <canvas id="chartReceived" height="120"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Advance (Monthly)</span>
                                    <small class="text-muted">Last 12 months</small>
                                </div>
                                <div class="card-body">
                                    <canvas id="chartAdvance" height="120"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Return (Monthly)</span>
                                    <small class="text-muted">Last 12 months</small>
                                </div>
                                <div class="card-body">
                                    <canvas id="chartReturn" height="120"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="card page-card">
                                <div class="card-header bg-white border-0">
                                    <span class="mini-title">Balance (Monthly)</span>
                                    <small class="text-muted">Sale - (Received + Advance)</small>
                                </div>
                                <div class="card-body">
                                    <canvas id="chartBalance" height="90"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </main>
@endsection

@section('pageJs')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_salei").addClass("active");
        $("#salei").addClass("is-expanded");
        $("#customer_add").addClass("active");

        const charts = @json($charts);

        function makeDatasets(ds) {
            // Chart.js will auto-color. (We don't hardcode colors.)
            return ds.map(x => ({
                label: x.label,
                data: x.data,
                tension: 0.3,
                borderWidth: 2,
                fill: false,
            }));
        }

        function renderLineChart(canvasId, labels, datasets) {
            const ctx = document.getElementById(canvasId);
            if (!ctx) return;

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels,
                    datasets: makeDatasets(datasets)
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        },
                        tooltip: {
                            enabled: true
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        renderLineChart('chartSale', charts.labels, charts.sale);
        renderLineChart('chartReceived', charts.labels, charts.received);
        renderLineChart('chartAdvance', charts.labels, charts.advance);
        renderLineChart('chartReturn', charts.labels, charts.return);
        renderLineChart('chartBalance', charts.labels, charts.balance);
    </script>
@endsection