@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 posisi barang dalam proses 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 semua data
                            secara default.
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <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 class="">
                        <form action="{{ route('report.wip.export') }}" method="POST">
                            @csrf
                            <input type="hidden" name="start_date" value="{{ request('start_date') }}">
                            <input type="hidden" name="end_date" value="{{ request('end_date') }}">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-excel"></i>
                                Export to Excel
                            </button>
                        </form>
                    </div>
                </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>
                                <th>Aksi</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>
                                        <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: <span id="modal-material-info"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="modal-filter-area" data-material-code="" data-divisi-code="">
                        <div class="d-flex justify-content-start gap-3">
                            <div>
                                <label for="start_date_modal" class="form-label">Doc. Start Date</label>
                                <input type="date" class="form-control" name="start_date_modal" id="start_date_modal"
                                    value="{{ request('start_date') }}">
                            </div>
                            <div>
                                <label for="end_date_modal" class="form-label">Doc. End Date</label>
                                <input type="date" class="form-control" name="end_date_modal" id="end_date_modal"
                                    value="{{ request('end_date') }}">
                            </div>
                            <div class="d-flex align-self-end">
                                <button class="btn btn-primary" type="button" id="filter-modal-btn">
                                    Filter
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive mt-3">
                        <div class="d-flex justify-content-between align-items-center gap-3 mb-3">
                            <div class="d-flex justify-content-start align-items-center">
                                <h5 class="me-2">Keterangan :</h5>
                                <div class="badge bg-success me-2">Debit (Masuk)</div>
                                <div class="badge bg-danger">Kredit (Keluar)</div>
                            </div>
                            <div id="total-summary-modal" class="d-flex gap-3 align-items-center">
                            </div>
                        </div>
                        <div id="mutasi-content"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary cancel-button" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $("#export-button").DataTable({
            order: [
                [0, 'desc']
            ],
        });
    </script>

    <script>
        // Fungsi utama untuk menampilkan detail, yang juga dipanggil saat tombol Filter modal diklik
        function loadMutasiDetail(startDate, endDate, materialCode, divisiCode) {
            // Update info di header modal
            $('#modal-material-info').text(`(${divisiCode} - ${materialCode})`);

            // Simpan kode barang dan divisi di data attribute area filter
            $('#modal-filter-area').data('material-code', materialCode);
            $('#modal-filter-area').data('divisi-code', divisiCode);

            // Tampilkan loading state
            $('#mutasi-content').html('<p class="text-center">Loading detail...</p>');

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

                    // 1. HITUNG TOTAL DEBIT DAN KREDIT
                    response.stocks.forEach(stock => {
                        let qty = parseFloat(stock.qty) || 0; // Pastikan qty adalah float
                        if (stock.dk_code === 'DEBIT') {
                            totalDebit += qty;
                        } else if (stock.dk_code === 'KREDIT') {
                            totalKredit += qty;
                        }
                    });

                    let formattedDebit = totalDebit.toLocaleString('id-ID');
                    let formattedKredit = totalKredit.toLocaleString('id-ID');

                    let summaryHtml = `
                        <h6 class="mb-0">
                            Total Debit: <span class="text-success">${formattedDebit}</span>
                        </h6>
                        <h6 class="mb-0">
                            Total Kredit: <span class="text-danger">${formattedKredit}</span>
                        </h6>
                    `;
                    $('#total-summary-modal').html(summaryHtml);

                    let html = `
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr class="bg-light-primary">
                                <th>No</th>
                                <th>BC Type</th>
                                <th>BC 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>Material Type</th>
                                <th>UoM</th>
                                <th>D/K</th>
                                <th>Qty</th>   
                                <th>Adjustment</th>                          
                                <th>Remark</th>                                 
                            </tr>
                        </thead>
                        <tbody>
                `;

                    // Sortir data berdasarkan tanggal/recorded
                    let sortedStocks = response.stocks.sort((a, b) => {
                        return new Date(a.created_at) - new Date(b
                            .created_at);
                    }).reverse();

                    sortedStocks.forEach((stock, index) => {
                        html += `
                            <tr>
                                <td>${totalData - index}</td>
                                <td>${stock.bc_type ?? ''}</td>
                                <td>${stock.bc_no ?? ''}</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 === 'DEBIT' ? '<span class="badge bg-success">DEBIT</span>' : '<span class="badge bg-danger">KREDIT</span>'}
                                </td>
                                <td>${stock.qty}</td>  
                                <td>${stock.adjustment}</td>                       
                                <td>${stock.remark}</td>                          
                            </tr>
                    `;
                    });

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

                    $('#mutasi-content').html(html);
                },
                error: function(xhr) {
                    $('#mutasi-content').html('<p class="text-danger">Gagal memuat detail: ' + xhr
                        .responseText + '</p>');
                }
            });
        }

        // Fungsi yang dipanggil dari tombol Detail di tabel utama
        function showDetail(startDate, endDate, materialCode, divisiCode) {
            $('#start_date_modal').val(startDate);
            $('#end_date_modal').val(endDate);

            // Panggil fungsi untuk memuat detail
            loadMutasiDetail(startDate, endDate, materialCode, divisiCode);

            // Tampilkan modal
            $('#mutasi-modal').modal('show');
        }

        // Event listener untuk tombol filter di dalam modal
        $(document).ready(function() {
            $('#filter-modal-btn').on('click', function() {
                let newStartDate = $('#start_date_modal').val();
                let newEndDate = $('#end_date_modal').val();
                let materialCode = $('#modal-filter-area').data('material-code');
                let divisiCode = $('#modal-filter-area').data('divisi-code');

                if (materialCode && divisiCode) {
                    loadMutasiDetail(newStartDate, newEndDate, materialCode, divisiCode);
                } else {
                    alert('Error: Kode barang atau divisi tidak ditemukan.');
                }
            });
        });
    </script>
@endsection