@extends('layouts.layoutapp')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card me-2">
                <div class="card-body">

                    <div class="d-flex justify-content-between mb-3">
                        <h4>Internal Purchase Report</h4>

                        <form method="GET" class="d-flex">
                            <input type="date" name="start_date" class="form-control me-2"
                                value="{{ request('start_date') }}">
                            <input type="date" name="end_date" class="form-control me-2" value="{{ request('end_date') }}">
                            <button class="btn btn-primary btn-sm">Filter</button>
                        </form>
                    </div>

                    <div class="table-responsive">
                        <table class="table text-center text-xs" id="myTable">
                            <thead>
                                <tr>
                                    <th>Branch</th>
                                    <th>Product Code</th>
                                    <th>Product</th>
                                    <th>Manufactured Date</th>
                                    <th>Qty</th>
                                    <th>Unit Cost</th>
                                    <th>Total Cost</th>
                                    <th>Selling Price</th>
                                    <th>Supplier</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($productData as $product)
                                    <tr>
                                        <td>{{ $product['branch_name'] }}</td>
                                        <td>{{ $product['product_code'] }}</td>
                                        <td>{{ $product['product_name'] }}</td>
                                        <td>{{ $product['manufactured_on'] ? \Carbon\Carbon::parse($product['manufactured_on'])->format('d-m-Y') : '' }}
                                        </td>
                                        <td>{{ $product['quantity'] }}</td>
                                        <td>₹ {{ number_format($product['unit_price'], 2) }}</td>
                                        <td>₹ {{ number_format($product['total_unit_price'], 2) }}</td>
                                        <td>₹ {{ number_format($product['selling_price'], 2) }}</td>
                                        <td><span class="badge bg-info">Internal</span></td>
                                        <td>
                                            <a class="view-bom" data-product="{{ $product['product_name'] }}"
                                                data-bom='@json($product["bom_items"])'>
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10">No internal manufacturing records found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- BOM MODAL -->
    <div class="modal fade" id="bomModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5>BOM Details – <span id="bomProductName"></span></h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <table class="table text-center text-xs">
                        <thead>
                            <tr>
                                <th>Material Name</th>
                                <th>Unit Qty</th>
                                <th>Assemble Qty</th>
                                <th>Unit Cost</th>
                                <th>Total Cost</th>
                            </tr>
                        </thead>

                        <tbody id="bomTableBody"></tbody>

                        <!-- ✅ TOTAL UNIT COST -->
                        <tfoot>
                            <tr class="fw-bold bg-light">
                                <td colspan="4" class="text-end">Total Unit Cost</td>
                                <td id="bomTotalCost">₹ 0.00</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            document.querySelectorAll('.view-bom').forEach(btn => {
                btn.addEventListener('click', () => {

                    const bomItems = JSON.parse(btn.dataset.bom || '[]');
                    const product = btn.dataset.product;

                    document.getElementById('bomProductName').textContent = product;

                    const tbody = document.getElementById('bomTableBody');
                    const totalEl = document.getElementById('bomTotalCost');

                    tbody.innerHTML = '';
                    let totalCost = 0;

                    if (!bomItems.length) {
                        tbody.innerHTML = `
                            <tr>
                                <td colspan="5">No BOM items found</td>
                            </tr>`;
                    } else {
                        bomItems.forEach(item => {
                            totalCost += Number(item.amount || 0);

                            tbody.innerHTML += `
                                <tr>
                                    <td>${item.name} ${item.code}</td>
                                    <td>${item.qty}</td>
                                    <td>${item.assemble_qty}</td>
                                    <td>₹ ${Number(item.unit_cost).toFixed(2)}</td>
                                    <td>₹ ${Number(item.amount).toFixed(2)}</td>
                                </tr>`;
                        });
                    }

                    totalEl.textContent = `₹ ${totalCost.toFixed(2)}`;

                    new bootstrap.Modal(document.getElementById('bomModal')).show();
                });
            });

        });

    </script>
@endpush