@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 Mutasi Barang Modal dan Barang Lain</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.mutasi-mesin.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="basic-1">
                        <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>
                                <th>Saldo Awal</th>
                                <th>Jumlah Pemasukan Barang</th>
                                <th>Jumlah Pengeluaran Barang</th>
                                <th>Penyesuaian (adjusment)</th>
                                <th>Saldo Akhir</th>
                                <th>Hasil Pencacahan</th>
                                <th>Jumlah Selisih</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
				
                            @foreach ($mutasiBahanJadi 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'] ?? 0 }}</td>
                                    <td>{{ $data['saldo_awal'] ?? 0 }}</td>
                                    <td>{{ $data['jumlah_pemasukan'] ?? 0 }}</td>
                                    <td>{{ $data['jumlah_pengeluaran'] ?? 0 }}</td>
                                    <td>{{ $data['adjustment'] }}</td>
                                    <td>{{ $data['jumlah_barang'] ?? 0 }}</td>
                                    {{-- <td>
                                            @foreach ($data['reff'] as $reff)
                                                {{ $reff }}
                                            @endforeach
                                        </td> --}}
                                    <td>{{ $data['stock_opname'] ?? 0 }}</td>
                                    <td>{{ $data['selisih'] ?? 0 }}</td>
                                    <td>
                                        <button class="btn btn-secondary btn-xs"
                                            onclick="showDetail('{{ request('start_date') }}', '{{ request('end_date') }}', '{{ $materialCode }}', '{{ $divisiCode }}')">
                                            Detail
                                        </button>
                                    </td></tr>
                                @endforeach
                            @endforeach
				
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="mutasi-modal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-xl modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">
                        Detail Mutasi Barang
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="mutasi-content"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary cancel-button" data-bs-dismiss="modal">Close</button>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $('#basic-1').DataTable()
    </script>

    <script>
        function showDetail(startDate, endDate, materialCode, divisiCode) {
            $.ajax({
                url: "{{ route('ajax.mutasi.material') }}",
                type: "GET",
                data: {
                    start_date: startDate,
                    end_date: endDate,
                    material_code: materialCode,
                    divisi_code: divisiCode
                },
                success: function(response) {
                    let totalData = response.stocks.length;

                    let html = `
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr class="bg-light-primary">
                                            <th>No</th>
                                            <th>Doc. No</th>
                                            <th>Doc. Date</th>
                                            <th>Recorded</th>
                                            <th>Divisi Code</th>
                                            <th>Material Fullname</th>
                                            <th>Material Code</th>
                                            <th>Type</th>
                                            <th>UoM</th>
                                            <th>D/K</th>
                                            <th>Qty</th>   
                                            <th>Adjustment</th>                                          
                                            <th>Balance</th>
                                            <th>Remark</th>                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                            `;

                    response.stocks.forEach((stock, index) => {
                        html += `
                                <tr>
                                    <td>${totalData - index}</td>
                                    <td>${stock.data.no}</td>
                                    <td>${stock.data.date}</td>
                                    <td>${stock.formatted_created_at}</td>
                                    <td>${stock.divisi_code}</td>
                                    <td>${stock.material.formatted_material}</td>
                                    <td>${stock.material_code}</td>
                                    <td>${stock.material.material_type_code}</td>
                                    <td>${stock.material.uom_code}</td>                                    
                                    <td>${stock.dk_code}</td>
                                    <td>${stock.qty}</td>  
                                    <td>${stock.adjustment}</td>                                   
                                    <td>${stock.balance}</td>
                                    <td>${stock.remark}</td>                                    
                                </tr>
                            `;
                    });

                    html += `
                            </tbody>
                        </table>
                    `;

                    // Menampilkan tabel di dalam div mutasi-content
                    $('#mutasi-content').html(html);

                    // Menampilkan modal
                    $('#mutasi-modal').modal('show');
                },
                error: function(xhr) {
                    alert("Terjadi kesalahan: " + xhr.responseText);
                }
            });
        }
    </script>
@endsection