@extends('layouts.master')
@section('title', 'Retur Faskes')

@section('styles')
<style>
    #tblRetur th, #tblRetur td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; }
    #tblRetur thead th { background: #f8f9fa; }
    .summary-card { border-radius: 10px; padding: 14px 18px; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Retur Faskes</p>
            <span class="fs-13 text-muted">Penjualan &rarr; Retur Faskes</span>
        </div>
        <a href="{{ route('penjualan.retur-kso.create') }}" class="btn btn-primary btn-sm px-3 py-1 mt-2 mt-md-0">
            <i class="bx bx-plus me-1"></i>Buat Retur
        </a>
    </div>

    {{-- Summary Cards --}}
    <div class="row g-3 mb-4" id="summaryCards">
        @foreach(['draft'=>['Draft','secondary','bx-edit'],'divalidasi'=>['Divalidasi','warning','bx-time'],'direvisi'=>['Perlu Revisi','danger','bx-revision'],'selesai'=>['Selesai','success','bx-check-circle']] as $key=>[$label,$color,$icon])
        <div class="col-6 col-md-3">
            <div class="card custom-card summary-card border-{{ $color }} border-start border-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="avatar avatar-md bg-{{ $color }}-transparent rounded-circle">
                        <i class="bx {{ $icon }} fs-4 text-{{ $color }}"></i>
                    </div>
                    <div>
                        <div class="fs-20 fw-bold" id="sum-{{ $key }}">—</div>
                        <div class="text-muted fs-12">{{ $label }}</div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="card custom-card">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="card-title mb-0">Daftar Retur</div>
            <select id="filterStatus" class="form-select form-select-sm" style="width:160px">
                <option value="">Semua Status</option>
                <option value="draft">Draft</option>
                <option value="divalidasi">Divalidasi</option>
                <option value="direvisi">Perlu Revisi</option>
                <option value="selesai">Selesai</option>
            </select>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="tblRetur" class="table table-bordered table-hover align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center" style="width:40px">No</th>
                            <th class="text-center" style="width:90px">Aksi</th>
                            <th>Nomor</th>
                            <th>Faskes</th>
                            <th class="text-center">Tgl. Dibuat</th>
                            <th class="text-center">Item</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Dibuat Oleh</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const ROUTES = {
    data:    '{{ route("penjualan.retur-kso.data") }}',
    summary: '{{ route("penjualan.retur-kso.summary") }}',
};

const STATUS_BADGE = {
    draft:      '<span class="badge bg-secondary">Draft</span>',
    divalidasi: '<span class="badge bg-warning text-dark">Divalidasi</span>',
    direvisi:   '<span class="badge bg-danger">Perlu Revisi</span>',
    selesai:    '<span class="badge bg-success">Selesai</span>',
};

$(function () {
    // Summary
    $.get(ROUTES.summary, d => {
        ['draft','divalidasi','direvisi','selesai'].forEach(k => {
            $('#sum-' + k).text(d[k] ?? 0);
        });
    });

    const tbl = $('#tblRetur').DataTable({
        processing: true,
        serverSide: true,
        ajax: { url: ROUTES.data, data: d => { d.status = $('#filterStatus').val(); } },
        dom: '<"d-flex align-items-center justify-content-between mb-2"lf>rt<"d-flex align-items-center justify-content-between mt-2"ip>',
        pageLength: 25,
        order: [[0, 'desc']],
        columns: [
            { data: null, render: (d,t,r,m) => m.row + m.settings._iDisplayStart + 1, orderable: false, className: 'text-center' },
            { data: 'aksi', orderable: false, className: 'text-center' },
            { data: 'nomor', render: v => `<span class="fw-semibold font-monospace">${v}</span>` },
            { data: 'nama_faskes' },
            { data: 'created_at', render: v => v ? new Date(v).toLocaleDateString('id-ID') : '—', className: 'text-center' },
            { data: 'jumlah_item', className: 'text-center' },
            { data: 'status', render: v => STATUS_BADGE[v] ?? v, className: 'text-center' },
            { data: 'dibuat_oleh', render: (v, t, r) => r.dibuat_oleh?.nama ?? '—', className: 'text-center' },
        ],
    });

    $('#filterStatus').on('change', () => tbl.ajax.reload());
});
</script>
@endsection