{{-- ============================================================
     modules/customers/index.blade.php
     ============================================================ --}}
@extends('layouts.app')
@section('title', 'Data Pelanggan')
@section('breadcrumb')
    <span>Penjualan</span><i class="bi bi-chevron-right"></i><span>Pelanggan</span>
@endsection

@section('content')
<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-people-fill me-2 text-primary-pf"></i>Data Pelanggan</h1>
        <p class="pf-page-subtitle">Kelola data pelanggan dan riwayat transaksi</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-success btn-sm" onclick="window.location='/customers/export'">
            <i class="bi bi-download"></i> Export
        </button>
        <a href="{{ route('customers.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-person-plus-fill"></i> Tambah Pelanggan
        </a>
    </div>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    @foreach([
        ['label'=>'Total Pelanggan','val'=>$stats['total'],   'color'=>'#1B4FD8','bg'=>'#EEF3FF','icon'=>'bi-people-fill'],
        ['label'=>'Aktif',          'val'=>$stats['aktif'],   'color'=>'#059669','bg'=>'#D1FAE5','icon'=>'bi-person-check-fill'],
        ['label'=>'Nonaktif',       'val'=>$stats['nonaktif'],'color'=>'#DC2626','bg'=>'#FEE2E2','icon'=>'bi-person-x-fill'],
        ['label'=>'Baru Bulan Ini', 'val'=>$stats['baru'],    'color'=>'#D97706','bg'=>'#FEF3C7','icon'=>'bi-person-plus-fill'],
    ] as $s)
    <div class="col-6 col-md-3">
        <div class="pf-stat-card" style="--pf-stat-color:{{ $s['color'] }};--pf-stat-bg:{{ $s['bg'] }}">
            <div class="pf-stat-icon"><i class="{{ $s['icon'] }}"></i></div>
            <div class="pf-stat-body">
                <div class="pf-stat-label">{{ $s['label'] }}</div>
                <div class="pf-stat-value">{{ $s['val'] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Filter --}}
<div class="pf-card mb-3">
    <div class="pf-card-body py-3">
        <div class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label mb-1" style="font-size:12px">Status</label>
                <select class="form-select form-select-sm" id="fStatus">
                    <option value="">Semua Status</option>
                    <option value="aktif">Aktif</option>
                    <option value="nonaktif">Nonaktif</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1" style="font-size:12px">Tipe</label>
                <select class="form-select form-select-sm" id="fTipe">
                    <option value="">Semua Tipe</option>
                    <option value="perusahaan">Perusahaan</option>
                    <option value="perorangan">Perorangan</option>
                </select>
            </div>
            <div class="col-md-2 d-flex gap-1">
                <button class="btn btn-sm btn-primary flex-fill" onclick="tbl.ajax.reload()">Filter</button>
                <button class="btn btn-sm btn-outline-secondary" onclick="resetFilter()"><i class="bi bi-x"></i></button>
            </div>
        </div>
    </div>
</div>

<div class="pf-card">
    <div class="pf-card-body p-0">
        <div class="table-responsive">
            <table id="tblCustomer" class="table table-hover mb-0" style="width:100%">
                <thead>
                    <tr>
                        <th>Kode</th>
                        <th>Nama Pelanggan</th>
                        <th>Telepon / WA</th>
                        <th>Email</th>
                        <th>Kota</th>
                        <th>Tipe</th>
                        <th>Total SO</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let tbl;
$(document).ready(function () {
    tbl = $('#tblCustomer').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '{{ route("customers.index") }}',
            data: d => { d.status = $('#fStatus').val(); d.tipe = $('#fTipe').val(); }
        },
        columns: [
            { data: 'kode', render: v => `<span class="font-mono" style="font-size:12px">${v}</span>` },
            { data: 'nama', render: (v,_,r) => `<a href="/customers/${r.id}" class="fw-500">${v}</a>` },
            { data: 'telepon', render: (v,_,r) => `<div>${v||'-'}</div><div style="font-size:11px;color:var(--pf-text-muted)">${r.email||''}</div>` },
            { data: 'email', visible: false },
            { data: 'kota', render: v => v || '-' },
            { data: 'tipe', render: v => `<span style="font-size:12px;text-transform:capitalize">${v}</span>` },
            { data: 'total_so', render: v => `<span class="font-mono fw-600">${v}</span>`, className:'text-center' },
            { data: 'status', render: v => `<span class="pf-status ${v==='aktif'?'pf-status-selesai':'pf-status-batal'}">${v.charAt(0).toUpperCase()+v.slice(1)}</span>` },
            { data: 'id', orderable: false, render: (id,_,r) => `
                <div class="d-flex gap-1">
                    <a href="/customers/${id}" class="btn btn-xs btn-outline-secondary"><i class="bi bi-eye"></i></a>
                    <a href="/customers/${id}/edit" class="btn btn-xs btn-outline-primary"><i class="bi bi-pencil"></i></a>
                    <button class="btn btn-xs btn-outline-success" onclick="buatSO(${id})" title="Buat SO"><i class="bi bi-cart-plus"></i></button>
                    <button class="btn btn-xs btn-outline-danger" onclick="PF.confirmDelete('/customers/${id}','${r.nama}')"><i class="bi bi-trash"></i></button>
                </div>` }
        ],
        order: [[1,'asc']]
    });
});

function resetFilter() { $('#fStatus,#fTipe').val(''); tbl.ajax.reload(); }
function buatSO(id) { window.location.href = `/sales-orders/create?pelanggan_id=${id}`; }
</script>
@endpush