@extends('layouts.app')

@section('content')

<div class="page-breadcrumb">
    <div class="row">
        <div class="col-12 d-flex no-block align-items-center">
            <h4 class="page-title">Production Metrics</h4>
            <div class="ms-auto text-end">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Production</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Metrics
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container py-5">


    <div class="bg-white rounded shadow mb-5">
        <!-- Rounded tabs -->
        <ul id="myTab" role="tablist"
            class="nav nav-tabs nav-pills flex-column flex-sm-row text-center bg-light border-0 rounded-nav">
            <li class="nav-item flex-sm-fill">
                <a id="bom-tab" data-toggle="tab" href="#bom" role="tab" aria-controls="bom" aria-selected="true"
                    class="nav-link border-0 text-uppercase font-weight-bold active">BOM</a>
            </li>
            <li class="nav-item flex-sm-fill">
                <a id="target-tab" data-toggle="tab" href="#target" role="tab" aria-controls="target" aria-selected="false" 
                class="nav-link border-0 text-uppercase font-weight-bold">Production Targets</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div id="bom" role="tabpanel" aria-labelledby="bom-tab" class="tab-pane fade px-4 py-5 show active">
                <div class="mt-3 mb-3">
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addBomModal">+ Add
                        BOM</button>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">BOM List</h5>
                        <div class="table-responsive">
                            <table id="zero_config" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Product Name</th>
                                        <th>UOM</th>
                                        <th>Quantity</th>
                                        <th>Cost</th>
                                        <th>Price</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($boms as $bom)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $bom->product->name }}</td>
                                        <td>{{ $bom->uom }}</td>
                                        <td>{{ $bom->quantity }}</td>
                                        <td>{{ $bom->cost }}</td>
                                        <td>{{ $bom->price }}</td>
                                        <td>
                                            <div class="dropdown">
                                                <div class="cursor-pointer font-24 dropdown-toggle"
                                                    data-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                                </div>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#" class="view"
                                                        data-toggle="modal" data-target="#show">View Items</a>
                                                    <a class="dropdown-item" href="#" class="edit"
                                                        data-toggle="modal" data-target="#edit">Edit</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>

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

            </div>
            <div id="target" role="tabpanel" aria-labelledby="target-tab" class="tab-pane fade px-4 py-5">
                <div class="mt-3 mb-3">
                  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addProductionTargetModal">+ New Production Target</button>
                </div>
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">Production Targets</h5>
                    <div class="table-responsive">
                      <table id="zero_config" class="table table-striped table-bordered">
                        <thead>
                          <tr>
                            <th>Product Name</th>
                            <th>Quantity</th>
                            <th>UOM</th>
                            <th>Created By</th>
                            <th>Created At</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach ($targets as $target)
                          <tr>
                            <td>{{ $target->product->name }}</td>
                            <td>{{ $target->quantity }}</td>
                            <td>{{ $target->product->uom->name }}</td>
                            <td>{{ $target->createdBy->name }}</td>
                            <td>{{ $target->created_at->format('Y-m-d') }}</td>
                            <td>
                                <div class="dropdown">
                                    <div class="cursor-pointer font-24 dropdown-toggle" data-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                    </div>
                                    <div class="dropdown-menu dropdown-menu-end"> 
                                        <a class="dropdown-item" href="#" class="view" data-toggle="modal" data-target="#view{{ $target->id }}">View</a>                                                                              
                                        <a class="dropdown-item" href="#" class="edit" data-toggle="modal" data-target="#edit{{ $target->id }}">Edit</a>
                                        <a class="dropdown-item" href="#" class="delete" data-toggle="modal" data-target="#deleteTargetModal{{ $target->id }}">Delete</a> 
                                    </div>
                                </div>  
                                
                            </td>
                                     <!-- Modal for Edit Production Targets -->
                            <div class="modal fade" id="editTargetModal_{{ $target->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                              @include('production.edittarget')
                            </div>
                              <!--end modal for editing Production Targets-->
                              <div class="modal fade" id="deleteTargetModal_{{ $target->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                @include('production.deletetarget')
                              </div>
                          </tr>
            
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>             
              
              <!-- Modal -->
            <div class="modal fade" id="addProductionTargetModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                @include('production.addtarget')  
            </div>


        </div>
        <!-- End rounded tabs -->
    </div>

</div>
<!-- Add BOM Modal -->
<div class="modal fade" id="addBomModal" tabindex="-1" role="dialog" aria-labelledby="addBomModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBomModalLabel">Add BOM</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- BOM Form -->
                <form class="row g-3" action="{{ route('bom.store') }}" method="post">
                    @csrf

                    <div class="form-group">
                        <label for="product_id">Product Name</label>
                        <select class="form-select" id="product_id" name="product_id" required>
                            <option value="">Select BOM Product</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Quantity -->
                    <div class="form-group">
                        <label for="quantity">Quantity</label>
                        <input type="number" class="form-control" id="quantity" name="quantity" step="0.01" required>
                    </div>

                    <div class="form-group">
                        <div class="form-group">
                            <label for="stock_items">Select Stock Items</label>
                            <select class="form-select" id="stock_items" name="stock_items[]" required>
                                @foreach ($stockItems as $stockItem)
                                    <option value="{{ $stockItem->id }}" data-uom="{{ $stockItem->product->uom->name }}" data-product="{{ $stockItem->product->name }}">
                                        {{ $stockItem->product->name }}
                                    </option>
                                   
                                @endforeach
                            </select>
                        </div>
                        
                        
                        <button type="button" class="btn-dark" id="add-stock">Add Stock Items</button>
                        
                        <table class="table" id="selected-items-table">
                            <thead>
                                <tr>
                                    <th>Stock Item</th>
                                    <th>Portion Quantity</th>
                                    <th>UOM</th>
                                </tr>
                            </thead>
                            <tbody id="selected-items-body">
                                <!-- Selected items will be displayed here -->
                            </tbody>
                        </table>
                        
                    <div class="form-group col-12">
                        <!-- Submit Button -->
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>

    $("#zero_config").DataTable();
</script>
<script src="{{asset('vendor/jquery/dist/jquery.min.js')}}"></script>
<script src="{{asset('vendor/popper.js/dist/popper.min.js')}}"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{asset('vendor/sweetalerts/sweetalert2.min.js')}}"></script>

@if(session('success'))
<script>
    swal("Success", "{{ session('success') }}", "success");
</script>
@endif
@if ($errors->any())
<script>
    Swal.fire({
        icon: 'error',
        title: 'Oops... There was an error!',
        html: "<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>",
    });
</script>
@endif
<script>
    $(document).ready(function () {
    // Array to store selected stock items and their quantities
    let selectedStockItems = {};

    // Event listener for the "Add Stock Items" button
    $('#add-stock').on('click', function () {
        let selectedItem = $('#stock_items').val();
        if (selectedItem) {
            updateSelectedItemsTable(selectedItem);
        }
    });

    function updateSelectedItemsTable(selectedItem) {
    let tableBody = $('#selected-items-body');
    let uom = $('#stock_items option:selected').data('uom') || 'default_uom';
    let productName = $('#stock_items option:selected').data('product') || 'default_name';

    let row = '<tr data-item="' + selectedItem + '">' +
        '<td>' + productName + '</td>' +
        '<td><input type="number" class="form-control" name="stock_quantities[' + selectedItem + ']" min="1" required></td>' +
        '<td>' + uom + '</td>' +
        '<td><button type="button" class="btn btn-danger btn-sm remove-button" data-item="' + selectedItem + '">Remove</button></td>' +
        '</tr>';
    tableBody.append(row);

    // Initialize selectedStockItems if not already done
    selectedStockItems[selectedItem] = selectedStockItems[selectedItem] || { quantity: 1 };
}



    // Event listener for the "Remove" button
    $(document).on('click', '.remove-button', function () {
        let item = $(this).data('item');

        // Remove the corresponding row from the table
        $(this).closest('tr').remove();

        // Remove the item from the array
        selectedStockItems = Object.fromEntries(
            Object.entries(selectedStockItems).filter(([key]) => key !== item)
        );
    });

    // Function to get UOM for each item
    function getUOMForItem(item) {
        // Assuming stock->product->uom->name is directly accessible
        return item && item.product && item.product.uom ? item.product.uom.name : 'default_uom';
    }

    // Function to get product name for each item
    function getProductForItem(item) {
        // Assuming stock->product->name is directly accessible
        return item && item.product ? item.product.name : 'default_name';
    }
});

</script>

@endsection