@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <h4>Laporan Posisi Barang Dalam Proses</h4>
                        <p class="f-m-light mt-1">
                            Laporan ini menampilkan mutasi bahan baku dan bahan penolong berdasarkan tanggal yang
                            dipilih. Anda dapat mencari data dengan memasukkan tanggal mulai dan tanggal akhir pada
                            form di bawah ini. Jika tidak ada tanggal yang dipilih, laporan akan menampilkan data
                            selama 7 hari terakhir secara default.
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="">
                    <form action="{{ route('report.wip.index') }}" method="GET">
                        <div class="d-flex justify-content-start gap-3">
                            <div>
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="date" class="form-control @error('start_date') is-invalid @enderror"
                                    name="start_date" id="start_date" value="{{ request('start_date') }}">
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div>
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="date" class="form-control @error('end_date') is-invalid @enderror"
                                    name="end_date" id="end_date" value="{{ request('end_date') }}">
                                @error('end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="d-flex align-self-end">
                                <button class="btn btn-primary" type="submit">
                                    Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <hr>
                <div class="table-responsive theme-scrollbar mt-3">
                    <table class="table table-hover table-bordered table-striped" id="export-button">
                        <thead>
                            <tr class="bg-light-primary text-dark">
                                <th>Divisi / Gudang</th>
                                <th>Kode Barang</th>
                                <th>Nama Barang</th>
                                <th>Satuan Barang</th>
                                <th>Jumlah Barang</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($wip as $divisiCode => $materials)
                                @foreach ($materials as $materialCode => $data)
                                    <tr>
                                        <td><strong>{{ $divisiCode }}</strong></td>
                                        <td>{{ $materialCode }}</td>
                                        <td>{{ $data['material_name'] }}</td>
                                        <td>{{ $data['material_uom'] }}</td>
                                        <td>{{ $data['jumlah_barang'] }}</td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="/assets/js/datatable/datatables/jquery.dataTables.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/dataTables.buttons.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/jszip.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.colVis.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/pdfmake.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/vfs_fonts.js"></script>
    <script src="/assets/js/datatable/datatable-extension/dataTables.autoFill.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/dataTables.select.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.bootstrap4.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.html5.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.print.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/custom.js"></script>
@endsection