@extends('dashboard.admin.layouts.master')

@section('content')
<div id="kt_app_content_container" class="app-container container-xxl">

    {{-- Branch filter --}}
    <div class="card mb-7 shadow-sm border-0">
        <div class="card-body py-4">
            <form method="GET" action="{{ route('admin.dashboard') }}">
                <div class="row g-4 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold text-muted fs-7 text-uppercase ls-1">
                            {{ trans('system.dashboard.branch') }}
                        </label>
                        <select name="branch_id" class="form-select form-select-solid">
                            <option value="">{{ trans('system.dashboard.all_branches') }}</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" @selected((string) $selectedBranchId === (string) $branch->id)>{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="ki-duotone ki-filter fs-4 me-1"><span class="path1"></span><span class="path2"></span></i>
                            {{ trans('system.dashboard.apply_filter') }}
                        </button>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <span class="text-muted fs-7">
                            <i class="ki-duotone ki-calendar fs-6 me-1"><span class="path1"></span><span class="path2"></span></i>
                            {{ now()->format('l, d F Y') }}
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- ─── KPI Row ──────────────────────────────────────────────── --}}
    @php
        $kpis = [
            [
                'label'  => trans('system.dashboard.total_invoices'),
                'value'  => number_format($analytics['sales']['total_invoices']),
                'sub'    => trans('system.dashboard.sales_summary'),
                'icon'   => 'ki-document',
                'color'  => 'primary',
                'bg'     => 'bg-primary',
            ],
            [
                'label'  => trans('system.dashboard.total_sales'),
                'value'  => number_format($analytics['sales']['total_sales'], 2),
                'sub'    => trans('system.dashboard.sales_summary'),
                'icon'   => 'ki-chart-line-up',
                'color'  => 'success',
                'bg'     => 'bg-success',
            ],
            [
                'label'  => trans('system.dashboard.total_employees'),
                'value'  => number_format($analytics['hr']['total_employees']),
                'sub'    => trans('system.dashboard.hr_summary'),
                'icon'   => 'ki-people',
                'color'  => 'info',
                'bg'     => 'bg-info',
            ],
            [
                'label'  => trans('system.dashboard.total_payroll'),
                'value'  => number_format($analytics['hr']['total_payroll'], 2),
                'sub'    => trans('system.dashboard.hr_summary'),
                'icon'   => 'ki-wallet',
                'color'  => 'warning',
                'bg'     => 'bg-warning',
            ],
            [
                'label'  => trans('system.dashboard.total_items'),
                'value'  => number_format($analytics['inventory']['total_items']),
                'sub'    => trans('system.dashboard.inventory_summary'),
                'icon'   => 'ki-package',
                'color'  => 'danger',
                'bg'     => 'bg-danger',
            ],
            [
                'label'  => trans('system.dashboard.total_warehouses'),
                'value'  => number_format($analytics['inventory']['total_warehouses']),
                'sub'    => trans('system.dashboard.inventory_summary'),
                'icon'   => 'ki-home-2',
                'color'  => 'dark',
                'bg'     => 'bg-dark',
            ],
        ];
    @endphp

    <div class="row g-5 mb-7">
        @foreach($kpis as $kpi)
        <div class="col-sm-6 col-xl-4">
            <div class="card border-0 shadow-sm h-100 hover-elevate-up">
                <div class="card-body d-flex align-items-center p-6">
                    <div class="symbol symbol-60px me-4 flex-shrink-0">
                        <span class="symbol-label {{ $kpi['bg'] }} bg-opacity-15 rounded-3">
                            <i class="ki-duotone {{ $kpi['icon'] }} fs-2x text-{{ $kpi['color'] }}">
                                <span class="path1"></span><span class="path2"></span>
                            </i>
                        </span>
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="text-muted fs-8 fw-semibold text-uppercase ls-1 mb-1 text-truncate">{{ $kpi['label'] }}</div>
                        <div class="fs-2 fw-bolder text-dark lh-1">{{ $kpi['value'] }}</div>
                        <div class="text-muted fs-8 mt-1">{{ $kpi['sub'] }}</div>
                    </div>
                    <div class="ms-3">
                        <span class="badge badge-light-{{ $kpi['color'] }} rounded-pill fs-8 px-3">
                            <i class="ki-duotone ki-arrow-up-right fs-7 me-1"><span class="path1"></span><span class="path2"></span></i>
                            Live
                        </span>
                    </div>
                </div>
                <div class="card-footer p-0 border-0">
                    <div class="h-3px w-100 rounded-bottom {{ $kpi['bg'] }}" style="opacity:0.6;"></div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    {{-- ─── Finance + GL Summary ─────────────────────────────────── --}}
    <div class="row g-5 mb-7">
        <div class="col-xl-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title d-flex align-items-center gap-3">
                        <span class="symbol symbol-40px">
                            <span class="symbol-label bg-light-primary">
                                <i class="ki-duotone ki-finance fs-2 text-primary"><span class="path1"></span><span class="path2"></span></i>
                            </span>
                        </span>
                        <h3 class="card-label fw-bold mb-0">{{ trans('system.dashboard.finance_summary') }}</h3>
                    </div>
                </div>
                <div class="card-body pt-4">
                    <div class="row g-5">
                        <div class="col-sm-4">
                            <div class="bg-light-primary rounded-3 p-5 text-center h-100">
                                <div class="fs-5x fw-bolder text-primary lh-1 mb-2">
                                    {{ number_format($analytics['finance']['total_posted_entries']) }}
                                </div>
                                <div class="text-muted fs-7">{{ trans('system.dashboard.total_posted_entries') }}</div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="bg-light-success rounded-3 p-5 text-center h-100">
                                <div class="fs-2 fw-bolder text-success lh-1 mb-2">
                                    {{ number_format($analytics['finance']['total_period_debit'], 2) }}
                                </div>
                                <div class="text-muted fs-7">{{ trans('system.dashboard.total_period_debit') }}</div>
                                <span class="badge badge-light-success mt-2">Dr</span>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="bg-light-danger rounded-3 p-5 text-center h-100">
                                <div class="fs-2 fw-bolder text-danger lh-1 mb-2">
                                    {{ number_format($analytics['finance']['total_period_credit'], 2) }}
                                </div>
                                <div class="text-muted fs-7">{{ trans('system.dashboard.total_period_credit') }}</div>
                                <span class="badge badge-light-danger mt-2">Cr</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card border-0 shadow-sm h-100"
                 style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);">
                <div class="card-body d-flex flex-column justify-content-between p-7">
                    <div>
                        <div class="d-flex align-items-center mb-5">
                            <i class="ki-duotone ki-chart-simple fs-3x text-white opacity-75 me-3">
                                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                            </i>
                            <h4 class="text-white fw-bold mb-0">{{ trans('system.dashboard.inventory_summary') }}</h4>
                        </div>

                        <div class="d-flex justify-content-between mb-4">
                            <div class="text-center">
                                <div class="fs-3 fw-bolder text-white">{{ number_format($analytics['inventory']['total_items']) }}</div>
                                <div class="text-white opacity-60 fs-8">{{ trans('system.dashboard.total_items') }}</div>
                            </div>
                            <div class="separator separator-vertical bg-white opacity-10"></div>
                            <div class="text-center">
                                <div class="fs-3 fw-bolder text-white">{{ number_format($analytics['inventory']['total_warehouses']) }}</div>
                                <div class="text-white opacity-60 fs-8">{{ trans('system.dashboard.total_warehouses') }}</div>
                            </div>
                            <div class="separator separator-vertical bg-white opacity-10"></div>
                            <div class="text-center">
                                <div class="fs-3 fw-bolder text-white">{{ number_format($analytics['inventory']['total_stock_movements']) }}</div>
                                <div class="text-white opacity-60 fs-8">{{ trans('system.dashboard.total_stock_movements') }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="progress bg-white bg-opacity-15 h-6px mt-4 rounded">
                        <div class="progress-bar bg-white" style="width: 72%"></div>
                    </div>
                    <div class="text-white opacity-60 fs-8 mt-2">72% warehouse utilization</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── HR Summary ───────────────────────────────────────────── --}}
    <div class="card border-0 shadow-sm mb-2">
        <div class="card-header border-0 pt-6">
            <div class="card-title d-flex align-items-center gap-3">
                <span class="symbol symbol-40px">
                    <span class="symbol-label bg-light-info">
                        <i class="ki-duotone ki-people fs-2 text-info"><span class="path1"></span><span class="path2"></span></i>
                    </span>
                </span>
                <h3 class="card-label fw-bold mb-0">{{ trans('system.dashboard.hr_summary') }}</h3>
            </div>
        </div>
        <div class="card-body pt-4">
            <div class="row g-5">
                <div class="col-sm-6">
                    <div class="d-flex align-items-center bg-light rounded-3 p-5 gap-4">
                        <div class="symbol symbol-50px">
                            <span class="symbol-label bg-info bg-opacity-15">
                                <i class="ki-duotone ki-abstract-41 fs-2x text-info"><span class="path1"></span><span class="path2"></span></i>
                            </span>
                        </div>
                        <div>
                            <div class="text-muted fs-8">{{ trans('system.dashboard.total_employees') }}</div>
                            <div class="fs-2 fw-bolder text-dark">{{ number_format($analytics['hr']['total_employees']) }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="d-flex align-items-center bg-light rounded-3 p-5 gap-4">
                        <div class="symbol symbol-50px">
                            <span class="symbol-label bg-warning bg-opacity-15">
                                <i class="ki-duotone ki-wallet fs-2x text-warning"><span class="path1"></span><span class="path2"></span></i>
                            </span>
                        </div>
                        <div>
                            <div class="text-muted fs-8">{{ trans('system.dashboard.total_payroll') }}</div>
                            <div class="fs-2 fw-bolder text-dark">{{ number_format($analytics['hr']['total_payroll'], 2) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<style>
.hover-elevate-up {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-elevate-up:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
}
.fs-5x { font-size: 2.8rem; }
.ls-1 { letter-spacing: 0.05em; }
</style>
@endsection