@extends('layouts.master')

@section('title', 'Stok Opname')

@section('styles')
<style>
    .grn-summary-card { border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
    .grn-summary-card .icon-wrap { width: 36px; height: 36px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .grn-summary-card .label { font-size: .7rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .grn-summary-card .value { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #222; }
    .grn-summary-card.draft   .icon-wrap { background: #f1f3f5; color: #6c757d; }
    .grn-summary-card.selesai .icon-wrap { background: #d1fae5; color: #059669; }
    #tblSO th, #tblSO td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblSO thead th { background: #f8f9fa; }
    #tblSO_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblSO_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblSO_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblSO_wrapper .dataTables_filter label,
    #tblSO_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblSO_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
</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">Stok Opname</p>
            <span class="fs-13 text-muted">Gudang &rarr; Stok Opname</span>
        </div>
        <a href="{{ route('gudang.stok-opname.create') }}" class="btn btn-primary btn-sm px-2 py-1 mt-2 mt-md-0">
            <i class="bx bx-plus me-1"></i> Buat Opname Baru
        </a>
    </div>

    {{-- Summary Cards --}}
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card draft">
                        <div class="icon-wrap"><i class="bx bx-file-blank"></i></div>
                        <div><div class="label">Draft</div><div class="value" id="cardDraft">—</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card selesai">
                        <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">Selesai</div><div class="value" id="cardSelesai">—</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <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 Stok Opname</div>
                </div>

                {{-- Filter --}}
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-4">
                            <label class="form-label mb-1 small fw-semibold">Gudang</label>
                            <select id="filterGudang" class="form-select form-select-sm">
                                <option value="">Semua Gudang</option>
                                @foreach($gudangList as $g)
                                <option value="{{ $g->id }}">{{ $g->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Status</label>
                            <select id="filterStatus" class="form-select form-select-sm">
                                <option value="">Semua Status</option>
                                <option value="draft">Draft</option>
                                <option value="selesai">Selesai</option>
                            </select>
                        </div>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblSO" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:100px">Aksi</th>
                                    <th>Nomor</th>
                                    <th>Gudang</th>
                                    <th>Tanggal</th>
                                    <th>Status</th>
                                    <th>Dibuat Oleh</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL = '{{ url('') }}';

$(function () {
    const tblSO = $('#tblSO').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('gudang.stok-opname.data') }}',
            data: function(d) {
                d.gudang_id = $('#filterGudang').val();
                d.status    = $('#filterStatus').val();
            },
        },
        columns: [
            {
                data: 'aksi', orderable: false, className: 'text-center',
                render: function(id, _, row) {
                    return `<a href="${BASE_URL}/gudang/stok-opname/${id}" class="btn btn-info btn-sm px-2 py-1" title="Detail"><i class="bx bx-show fs-14"></i></a>`;
                }
            },
            { data: 'nomor_opname' },
            { data: 'gudang.nama' },
            { data: 'tanggal_fmt' },
            { data: 'status_badge', orderable: false },
            { data: 'dibuat_nama', defaultContent: '—' },
        ],
        order: [[1, 'desc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $('#filterGudang, #filterStatus').on('change', () => tblSO.ajax.reload());

    // Summary
    fetch('{{ route('gudang.stok-opname.data') }}?draw=1&start=0&length=0&status=draft')
        .then(r => r.json()).then(d => { document.getElementById('cardDraft').textContent = d.recordsFiltered ?? '—'; });
    fetch('{{ route('gudang.stok-opname.data') }}?draw=1&start=0&length=0&status=selesai')
        .then(r => r.json()).then(d => { document.getElementById('cardSelesai').textContent = d.recordsFiltered ?? '—'; });
});
</script>
@endsection