<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>

     <?php $__env->slot('header', null, []); ?> 

        <div class="flex items-center justify-between">

            <div>

                <h2 class="text-2xl font-bold text-slate-800">
                    Product Formula / BOM
                </h2>

                <p class="text-slate-500 text-sm mt-1">
                    Manage materials required for one product
                </p>

            </div>

            

        </div>

     <?php $__env->endSlot(); ?>

    <form action="<?php echo e(route('products.saveFormula', $product->id)); ?>"
          method="POST">

        <?php echo csrf_field(); ?>

        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">

            <!-- Product Info -->
            <div class="p-6 border-b bg-slate-50">

                <div class="flex items-center gap-5">

                    <div class="w-20 h-20 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center text-4xl">

                        <i class="bi bi-box-seam"></i>

                    </div>

                    <div>

                        <h2 class="text-2xl font-bold text-slate-800">
                            <?php echo e($product->name); ?>

                        </h2>

                        <div class="flex flex-wrap gap-5 mt-2 text-sm text-slate-600">

                            <p>
                                <span class="font-semibold">
                                    Code:
                                </span>

                                <?php echo e($product->code); ?>

                            </p>

                            <p>
                                <span class="font-semibold">
                                    Price:
                                </span>

                                ₹ <?php echo e($product->price); ?>

                            </p>

                            <p>
                                <span class="font-semibold">
                                    GST:
                                </span>

                                <?php echo e($product->gst); ?>%
                            </p>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Formula Section -->
            <div class="p-6">

                <div class="mb-5">

                    <h3 class="text-xl font-bold text-slate-800">
                        Raw Materials
                    </h3>

                    <p class="text-slate-500 text-sm mt-1">
                        Add materials used for one product
                    </p>

                </div>

                <!-- Materials -->
                <!-- Materials -->
<div id="materials-wrapper" class="space-y-4">

    <?php if($product->materials->count() > 0): ?>

        <?php $__currentLoopData = $product->materials; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

            <div class="material-row flex flex-col md:flex-row gap-4 items-end bg-slate-50 border border-slate-200 rounded-2xl p-4">

                <!-- Material -->
                <div class="flex-1 w-full">

                    <label class="text-sm font-semibold text-slate-700">
                        Raw Material
                    </label>

                    <select name="material_id[]"
                            class="w-full rounded-xl border-slate-300 mt-2">

                        <option value="">
                            Select Material
                        </option>

                        <?php $__currentLoopData = $materials; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $material): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                            <option value="<?php echo e($material->id); ?>"
                                <?php echo e($item->id == $material->id ? 'selected' : ''); ?>>

                                <?php echo e($material->name); ?>

                                | Stock: <?php echo e($material->stock); ?>

                                <?php echo e($material->unit); ?>


                            </option>

                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    </select>

                </div>

                <!-- Quantity -->
                <div class="w-full md:w-52">

                    <label class="text-sm font-semibold text-slate-700">
                        Quantity
                    </label>

                    <input type="number"
                           step="0.01"
                           name="quantity[]"
                           value="<?php echo e($item->pivot->quantity); ?>"
                           class="w-full rounded-xl border-slate-300 mt-2">

                </div>

                <!-- Buttons -->
                <div class="flex gap-2">

                    <!-- Add -->
                    <button type="button"
                            onclick="addRow()"
                            class="w-12 h-12 rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center text-xl transition">

                        <i class="bi bi-plus-lg"></i>

                    </button>

                    <!-- Remove -->
                    <button type="button"
                            onclick="removeRow(this)"
                            class="w-12 h-12 rounded-xl bg-red-500 hover:bg-red-600 text-white flex items-center justify-center text-xl transition">

                        <i class="bi bi-dash-lg"></i>

                    </button>

                </div>

            </div>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    <?php else: ?>

        <!-- Default Empty Row -->
        <div class="material-row flex flex-col md:flex-row gap-4 items-end bg-slate-50 border border-slate-200 rounded-2xl p-4">

            <!-- Material -->
            <div class="flex-1 w-full">

                <label class="text-sm font-semibold text-slate-700">
                    Raw Material
                </label>

                <select name="material_id[]"
                        class="w-full rounded-xl border-slate-300 mt-2">

                    <option value="">
                        Select Material
                    </option>

                    <?php $__currentLoopData = $materials; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $material): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                        <option value="<?php echo e($material->id); ?>">

                            <?php echo e($material->name); ?>

                            | Stock: <?php echo e($material->stock); ?>

                            <?php echo e($material->unit); ?>


                        </option>

                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                </select>

            </div>

            <!-- Quantity -->
            <div class="w-full md:w-52">

                <label class="text-sm font-semibold text-slate-700">
                    Quantity
                </label>

                <input type="number"
                       step="0.01"
                       name="quantity[]"
                       placeholder="0.00"
                       class="w-full rounded-xl border-slate-300 mt-2">

            </div>

            <!-- Buttons -->
            <div class="flex gap-2">

                <!-- Add -->
                <button type="button"
                        onclick="addRow()"
                        class="w-12 h-12 rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center text-xl transition">

                    <i class="bi bi-plus-lg"></i>

                </button>

                <!-- Remove -->
                <button type="button"
                        onclick="removeRow(this)"
                        class="w-12 h-12 rounded-xl bg-red-500 hover:bg-red-600 text-white flex items-center justify-center text-xl transition">

                    <i class="bi bi-dash-lg"></i>

                </button>

            </div>

        </div>

    <?php endif; ?>

</div>

                <!-- Save -->
                <div class="mt-8 flex gap-4">

                    <button type="submit"
                            class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-xl shadow-sm transition">

                        Save Formula

                    </button>

                    <a href="<?php echo e(route('products.index')); ?>"
                       class="bg-slate-500 hover:bg-slate-600 text-white px-8 py-3 rounded-xl transition">

                        Cancel

                    </a>

                </div>

            </div>

        </div>

    </form>

    <script>

        function addRow()
        {
            let row = document.querySelector('.material-row').cloneNode(true);

            row.querySelectorAll('input').forEach(input => {
                input.value = '';
            });

            row.querySelectorAll('select').forEach(select => {
                select.selectedIndex = 0;
            });

            document.getElementById('materials-wrapper')
                    .appendChild(row);
        }

        function removeRow(button)
        {
            let rows = document.querySelectorAll('.material-row');

            if(rows.length > 1)
            {
                button.closest('.material-row').remove();
            }
        }

    </script>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\xampp\htdocs\manufacturing-system\resources\views/products/formula.blade.php ENDPATH**/ ?>