@extends('layouts.admin.app', ["title" => "Detail Stok Opname"])

@push('css')
<style>
    .badge-tambah { background-color: #28a745; color: #fff; }
    .badge-kurang { background-color: #dc3545; color: #fff; }
    .badge-sama   { background-color: #6c757d; color: #fff; }

    @media (max-width: 575.98px) {
        .ml-1 { margin-left: 0 !important; }
    }
    @media (min-width: 1024px) {
        .modal-header { padding: 15px 25px !important; }
    }
    .card-icon { padding: 10px 10px !important; }
    .card-statistic-2 {
        overflow: auto !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
@endpush

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Detail Stok Opname</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Laporan</a></div>
                <div class="breadcrumb-item"><a href="{{ route('laporan_stok_opname') }}">Stok Opname</a></div>
                <div class="breadcrumb-item">Detail</div>
            </div>
        </div>

        <div class="section-body">
            <div class="mb-2">
                <a href="{{ route('laporan_stok_opname') }}" class="btn btn-primary">
                    <i class="fa-solid fa-backward"></i> Kembali
                </a>
            </div>

            <div class="row">

                {{-- Card Tanggal --}}
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-active card-statistic-2">
                        <div class="card-icon active-icon shadow-white bg-white">
                            <i class="fa-solid fa-calendar"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-white">Tanggal</h4>
                            </div>
                            <div class="card-body text-white" id="tanggal"></div>
                        </div>
                    </div>
                </div>

                {{-- Card Faktur --}}
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-icon shadow-primary bg-primary">
                            <i class="fa-solid fa-newspaper" style="color:#fff;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-primary">Faktur</h4>
                            </div>
                            <div class="card-body text-primary" id="faktur"></div>
                        </div>
                    </div>
                </div>

                {{-- Card Total Barang --}}
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-active card-statistic-2">
                        <div class="card-icon active-icon shadow-white bg-white">
                            <i class="fa-solid fa-dolly" style="color:var(--primary)"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-white">Total Barang</h4>
                            </div>
                            <div class="card-body text-white" id="total-barang"></div>
                        </div>
                    </div>
                </div>

                {{-- Detail Info --}}
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">Detail</h4>
                        </div>
                        <div class="card-body row" style="padding-top: 5px;">
                            <div class="col-12 col-md-6 col-lg-6">
                                <table class="table table-detail table-horizontal-lines">
                                    <tbody>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Kasir</th>
                                            <td class="detail-isi" id="kasir"></td>
                                        </tr>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Catatan</th>
                                            <td class="detail-catatan" id="catatan"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-12 col-md-6 col-lg-6">
                                <table class="table table-detail table-horizontal-lines">
                                    <tbody>
                                        <tr>
                                            <th class="fw-semibold detail-label text-dark">Bertambah</th>
                                            <td class="detail-isi text-right" id="tambah"></td>
                                        </tr>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Berkurang</th>
                                            <td class="detail-isi text-right" id="kurang"></td>
                                        </tr>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Sesuai</th>
                                            <td class="detail-isi text-right" id="sama"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabel List Barang --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">List Barang yang Diopname</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="tableDetail" style="width:100%; border-collapse: collapse;">
                                    <thead style="background-color: #343a40;">
                                        <tr>
                                            <th style="width:5%; color:#fff; border:1px solid #454d55;">No</th>
                                            <th style="width:12%; color:#fff; border:1px solid #454d55;">Kode</th>
                                            <th style="width:28%; color:#fff; border:1px solid #454d55;">Nama Barang</th>
                                            <th style="width:12%; color:#fff; border:1px solid #454d55;">Stok Sebelum</th>
                                            <th style="width:12%; color:#fff; border:1px solid #454d55;">Stok Fisik</th>
                                            <th style="width:12%; color:#fff; border:1px solid #454d55;">Selisih</th>
                                            <th style="width:19%; color:#fff; border:1px solid #454d55;">Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

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

@push('js')
<script>
    let id    = `{{ $id }}`;
    let token = `{{ $token }}`;

    $(document).ready(function () {
        loadDetail();
    });

    function loadDetail() {
        $.ajax({
            url: '/api/laporans/stok_opname/' + id,
            type: 'GET',
            headers: { 'Authorization': 'Bearer ' + token },
            success: function (res) {
                let t = new Date(res.stok_opname.created_at);
                $('#tanggal').text(
                    t.getDate().toString().padStart(2, '0') + '-' +
                    (t.getMonth() + 1).toString().padStart(2, '0') + '-' +
                    t.getFullYear() + ' ' +
                    t.getHours().toString().padStart(2, '0') + ':' +
                    t.getMinutes().toString().padStart(2, '0')
                );
                $('#faktur').text(res.stok_opname.faktur);
                $('#total-barang').text(res.total + ' Barang');
                $('#kasir').text(res.stok_opname.user?.nama ?? '-');
                $('#catatan').text(res.stok_opname.catatan ?? '-');
                $('#tambah').text(res.ringkasan.tambah + ' Barang');
                $('#kurang').text(res.ringkasan.kurang + ' Barang');
                $('#sama').text(res.ringkasan.sama + ' Barang');

                loadTable();
            },
            error: function (xhr) {
                Swal.fire({
                    icon:  'error',
                    title: 'Gagal',
                    html:  xhr.responseJSON?.message ?? 'Terjadi kesalahan'
                });
            }
        });
    }

    function loadTable() {
        $('#tableDetail').DataTable({
            lengthChange: false,
            pageLength: 50,
            processing: true,
            serverSide: true,
            responsive: true,
            autoWidth: true,
            searching: false,
            info: false,
            paging: false,
            ajax: {
                url: '/api/laporans/stok_opname/list/' + id,
                type: 'GET',
                headers: { 'Authorization': 'Bearer ' + token }
            },
            columns: [
                {
                    data: null,
                    render: (data, type, row, meta) => meta.row + 1
                },
                {
                    data: 'barang.kode',
                    class: 'text-center',
                    render: (data) => `<span class="badge bg-primary text-white">${data}</span>`
                },
                { data: 'barang.nama' },
                { data: 'qty_sebelum', class: 'text-center' },
                { data: 'qty', class: 'text-center' },
                {
                    data: 'selisih',
                    class: 'text-center',
                    render: function (data) {
                        if (data > 0) return `<span class="badge badge-tambah">+${data}</span>`;
                        if (data < 0) return `<span class="badge badge-kurang">${data}</span>`;
                        return `<span class="badge badge-sama">0</span>`;
                    }
                },
                {
                    data: 'selisih',
                    class: 'text-center',
                    render: function (data) {
                        if (data > 0) return `<span class="text-success">Bertambah</span>`;
                        if (data < 0) return `<span class="text-danger">Berkurang</span>`;
                        return `<span class="text-secondary">Sesuai</span>`;
                    }
                }
            ]
        });
    }
</script>
@endpush