@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .error {
            color: red;
        }
    </style>
@endsection
@section('title')
    Manufacturing Consumption for {{ $stockItem->name }} - BOM {{ $stockItemBom->name }}
@endsection
@section('content')
    <main>
        <form action="/admin/stock-items-consumption/{{ $stockItemBom->id }}" method="POST" id="stock-item-form"
            autocomplete="off" class="needs-validation" novalidate>
            @csrf
            <div class="row">
                <div class="row">
                    <div class="col-md-12 text-end">
                        <a href="/admin/stock-item-bom/{{ $stockItem->id }}" class="btn btn-primary mb-3">Back to Stock Item
                            BOM</a>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header d-flex align-items-center">
                            <h5 class="card-title mb-0 flex-grow-1">
                                Manufacturing Consumption for {{ $stockItem->name }} - BOM {{ $stockItemBom->name }}
                            </h5>
                            <div class="col-md-3">
                                <select class="form-select" id="manufacturingMainUnit" name="manufacturing_main_unit">
                                    <option value="">Select Main Unit</option>
                                    @foreach ($itemUnits as $unit)
                                        <option value="{{ $unit->id }}"
                                            {{ $stockItemBom->manufacturing_unit_id == $unit->id ? 'selected' : '' }}>
                                            {{ $unit->symbol }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="addStockProductionRow">
                                @if ($stockItemManufacturers->count() > 0)
                                    @foreach ($stockItemManufacturers as $key => $stockItemManufacturer)
                                        @if ($key == 0)
                                            <div class="row extraRow4" id={{ $key + 1 }}>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="product-title-input">Item</label>
                                                        <select class="form-select manufacturing-item" id=""
                                                            name="manufacturing_item[]"
                                                            onChange = "getUnit({{ $key + 1 }})">
                                                            <option value=""></option>
                                                            @if ($stockItemManufacturer->manufacturing_item_id != null)
                                                                <option
                                                                    value="{{ $stockItemManufacturer->manufacturing_item_id }}"
                                                                    selected>
                                                                    {{ $stockItemManufacturer->manufacturingItem->name }}
                                                                </option>
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="product-title-input">Unit</label>
                                                        <select class="form-select manufacturing-unit" id=""
                                                            name="manufacturing_unit[]">
                                                            <option value=""></option>
                                                            @isset($stockItemManufacturer)
                                                                @php
                                                                    $itemUnits = \App\Models\StockItemUnits::where(
                                                                        'stock_item_id',
                                                                        $stockItemManufacturer->manufacturing_item_id,
                                                                    )->get();
                                                                @endphp
                                                                @foreach ($itemUnits as $itemUnit)
                                                                    <option value="{{ $itemUnit->unit_id }}"
                                                                        @if ($stockItemManufacturer->unit_id == $itemUnit->unit_id) selected @endif>
                                                                        {{ $itemUnit->unit->symbol }}</option>
                                                                @endforeach
                                                            @endisset
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="product-title-input">Quantity</label>
                                                        <input class="form-control" type="number"
                                                            value="{{ $stockItemManufacturer->quantity }}"
                                                            placeholder="Enter quantity" name="manufacturing_qty[]">
                                                    </div>
                                                </div>
                                                <div class="col-lg-1 d-flex justify-content-center align-items-center pt-2">
                                                    <button type="button" class="btn btn-danger btn-sm" id="removeRow4"><i
                                                            class="las la-minus"></i></button>
                                                </div>
                                            </div>
                                        @else
                                            <div class="row extraRow4" id={{ $key + 1 }}>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="product-title-input">Item</label>
                                                        <select class="form-select manufacturing-item" id=""
                                                            name="manufacturing_item[]"
                                                            onChange = "getUnit({{ $key + 1 }})">
                                                            <option value=""></option>
                                                            @if ($stockItemManufacturer->manufacturing_item_id != null)
                                                                <option
                                                                    value="{{ $stockItemManufacturer->manufacturing_item_id }}"
                                                                    selected>
                                                                    {{ $stockItemManufacturer->manufacturingItem->name }}
                                                                </option>
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="product-title-input">Unit</label>
                                                        <select class="form-select manufacturing-unit" id=""
                                                            name="manufacturing_unit[]">
                                                            <option value=""></option>
                                                            @isset($stockItemManufacturer)
                                                                @php
                                                                    $itemUnits = \App\Models\StockItemUnits::where(
                                                                        'stock_item_id',
                                                                        $stockItemManufacturer->manufacturing_item_id,
                                                                    )->get();
                                                                @endphp
                                                                @foreach ($itemUnits as $itemUnit)
                                                                    <option value="{{ $itemUnit->unit_id }}"
                                                                        @if ($stockItemManufacturer->unit_id == $itemUnit->unit_id) selected @endif>
                                                                        {{ $itemUnit->unit->symbol }}</option>
                                                                @endforeach
                                                            @endisset
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="product-title-input">Quantity</label>
                                                        <input class="form-control" type="number"
                                                            value="{{ $stockItemManufacturer->quantity }}"
                                                            placeholder="Enter quantity" name="manufacturing_qty[]">
                                                    </div>
                                                </div>
                                                <div class="col-md-1 d-flex justify-content-center align-items-center pt-4">
                                                    <button type="button" class="btn btn-danger btn-sm" id="removeRow4"><i
                                                            class="las la-minus"></i></button>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @else
                                    <div class="row extraRow4" id="1">
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label" for="product-title-input">Item</label>
                                                <select class="form-select manufacturing-item" id=""
                                                    name="manufacturing_item[]" onChange = "getUnit(1)">
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label" for="product-title-input">Unit</label>
                                                <select class="form-select manufacturing-unit" id=""
                                                    name="manufacturing_unit[]">
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="mb-3">
                                                <label class="form-label" for="product-title-input">Quantity</label>
                                                <input class="form-control" type="number" placeholder="Enter quantity"
                                                    name="manufacturing_qty[]">
                                            </div>
                                        </div>
                                        <div class="col-lg-1 d-flex justify-content-center align-items-center pt-2">
                                            <button type="button" class="btn btn-danger btn-sm" id="removeRow4"><i
                                                    class="las la-minus"></i></button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="text-end">
                                <button type="button" class="btn btn-primary btn-sm" id="addRow4"><i
                                        class="las la-plus">Add Row</i></button>
                            </div>
                        </div>
                    </div>
                    {{-- By Products --}}
                    <div class="card">
                        <div class="card-header d-flex align-items-center">
                            <h5 class="card-title mb-0 flex-grow-1">
                                By Products
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="byProductSection">
                                @if ($stockItemByProducts->count() > 0)
                                    @foreach ($stockItemByProducts as $key => $byProduct)
                                        <div class="row byProductRow" id="byProductRow_{{ $key + 1 }}">
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label class="form-label" for="product-title-input">Item</label>
                                                    <select class="form-select byproduct-item" id=""
                                                        name="byproduct_item[]"
                                                        onChange = "getUnitByProduct({{ $key + 1 }})">
                                                        @if ($byProduct->by_product_id != null)
                                                            <option value="{{ $byProduct->by_product_id }}" selected>
                                                                {{ $byProduct->byProduct->name }}</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label class="form-label" for="product-title-input">Unit</label>
                                                    <select class="form-select byproduct-unit" id=""
                                                        name="byproduct_unit[]">
                                                        <option value=""></option>
                                                        @isset($byProduct)
                                                            @php
                                                                $itemUnits = \App\Models\StockItemUnits::where(
                                                                    'stock_item_id',
                                                                    $byProduct->by_product_id,
                                                                )->get();
                                                            @endphp
                                                            @foreach ($itemUnits as $itemUnit)
                                                                <option value="{{ $itemUnit->unit_id }}"
                                                                    @if ($byProduct->unit_id == $itemUnit->unit_id) selected @endif>
                                                                    {{ $itemUnit->unit->symbol }}</option>
                                                            @endforeach
                                                        @endisset
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label class="form-label" for="product-title-input">Quantity</label>
                                                    <input class="form-control" type="number"
                                                        value="{{ $byProduct->quantity }}" placeholder="Enter quantity"
                                                        name="byproduct_qty[]" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-1 d-flex justify-content-center align-items-center pt-2">
                                                <button type="button" class="btn btn-danger btn-sm"
                                                    id="removeByProductRow"><i class="las la-minus"></i></button>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <div class="text-end">
                                <button type="button" class="btn btn-primary btn-sm" id="addByProductRow"><i
                                        class="las la-plus">Add Row</i></button>
                            </div>
                        </div>
                    </div>
                    {{-- End By Products --}}
                    {{-- Expenses --}}
                    <div class="card">
                        <div class="card-header d-flex align-items-center">
                            <h5 class="card-title mb-0 flex-grow-1">
                                Expenses
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="expenseSection">
                                @if ($stockItemExpenses->count() > 0)
                                    @foreach ($stockItemExpenses as $key => $expense)
                                        <div class="row expenseRow" id="expenseRow_{{ $key + 1 }}">
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label class="form-label" for="product-title-input">Item</label>
                                                    <select class="form-select byproduct-item" id=""
                                                        name="expense_ledger[]">
                                                        @if ($expense->expense_ledger_id != null)
                                                            <option value="{{ $expense->expense_ledger_id }}" selected>
                                                                {{ $expense->expenseLedger->name }}</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label class="form-label" for="product-title-input">Amount</label>
                                                    <input class="form-control" type="number"
                                                        value="{{ $expense->amount }}" placeholder="Enter Expense Amount"
                                                        name="expense_amount[]" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-1 d-flex justify-content-center align-items-center pt-2">
                                                <button type="button" class="btn btn-danger btn-sm removeExpenseRow"
                                                    id="removeExpenseRow"><i class="las la-minus"></i></button>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <div class="text-end">
                                <button type="button" class="btn btn-primary btn-sm" id="addExpenseRow"><i
                                        class="las la-plus">Add Row</i></button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-4 card card-footer">
                <div class="col text-end">
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </div>
            </div>
        </form>
    </main>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        $('.manufacturing-unit').select2({
            placeholder: 'Choose unit',
        });
        $('#manufacturingMainUnit').select2({
            placeholder: 'Choose unit',
        });
        $('.manufacturing-item').select2({
            placeholder: 'Choose item',
        });
        $(document).ready(function() {
            $('.manufacturing-item').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-stock-items",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                            from_sales: true,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
            $('.byproduct-item').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-stock-items",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                            from_sales: true,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
        });

        $('#stock-item-form').validate({
            submitHandler: function(form, e) {
                e.preventDefault();
                var url = $(form).attr('action');
                var formData = new FormData(form);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status == 'success') {
                            form.reset();
                            Swal.fire({
                                title: 'Success!',
                                text: data.message,
                                icon: 'success',
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            })
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            })
                        }
                    },
                    error: function(data) {
                        Swal.fire({
                            title: 'Error!',
                            text: data.message,
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        })
                    }
                });
            }
        });
        $(document).on('click', '#addRow4', function(e) {
            e.preventDefault();
            var rowCount = $('#addStockProductionRow .extraRow4:last').attr('id');
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            } else {
                rowCount = parseInt(rowCount) + parseInt(1);
            }
            var html = `<div class="row extraRow4" id="${rowCount}">
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Item</label>
                                            <select class="form-select manufacturing-item" id="" name="manufacturing_item[]" onChange = "getUnit(${rowCount})">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Unit</label>
                                            <select class="form-select manufacturing-unit" name="manufacturing_unit[]">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Quantity</label>
                                            <input class="form-control" type="number" placeholder="Enter quantity" name="manufacturing_qty[]">
                                        </div>
                                    </div>
                                    <div class="col-md-1 d-flex justify-content-center align-items-center pt-4">
                                        <button type="button" class="btn btn-danger btn-sm" id="removeRow4"><i class="las la-minus"></i></button>
                                    </div>
                                </div>`;
            $("#addStockProductionRow").append(html);
            $('.manufacturing-unit').select2({
                placeholder: 'Choose unit',
            });
            $('.manufacturing-item').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-stock-items",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                            from_sales: true,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
        });

        $(document).on('click', '#removeRow4', function(e) {
            e.preventDefault();
            $(this).closest('.extraRow4').remove();
        });

        function getUnit(id) {
            var item = $('#' + id).find('.manufacturing-item').val();
            if (item != "" && id != "") {
                $.ajax({
                    url: "{{ route('fetch-stock-item') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        "prd": item,
                    },
                    success: function(data) {
                        $("#" + id).find('.manufacturing-unit').html(data.options);
                    },
                    error: function(xhr) {
                        alert("Something went wrong. Please try again");
                    }
                });
            } else {
                alert("Something went wrong. Please try again");
            }
        }

        $(document).on('click', '#addByProductRow', function(e) {
            e.preventDefault();
            var rowCount = $('#byProductSection .byProductRow:last').attr('id');
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            } else {
                rowCount = parseInt(rowCount) + parseInt(1);
            }
            var html = `<div class="row byProductRow" id="byProductRow_${rowCount}">
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Item</label>
                                            <select class="form-select byproduct-item" id="" name="byproduct_item[]" onChange = "getUnitByProduct(${rowCount})" required>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Unit</label>
                                            <select class="form-select byproduct-unit" name="byproduct_unit[]" required>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Quantity</label>
                                            <input class="form-control" type="number" placeholder="Enter quantity" name="byproduct_qty[]" required>
                                        </div>
                                    </div>
                                    <div class="col-md-1 d-flex justify-content-center align-items-center pt-4">
                                        <button type="button" class="btn btn-danger btn-sm" id="removeByProductRow"><i class="las la-minus"></i></button>
                                    </div>
                                </div>`;
            $("#byProductSection").append(html);
            $('.manufacturing-unit').select2({
                placeholder: 'Choose unit',
            });
            $('.byproduct-item').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-stock-items",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                            from_sales: true,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
        });
        $(document).on('click', '#removeByProductRow', function(e) {
            e.preventDefault();
            $(this).closest('.byProductRow').remove();
        });

        function getUnitByProduct(id) {
            var item = $('#byProductRow_' + id).find('.byproduct-item').val();
            if (item != "" && id != "") {
                $.ajax({
                    url: "{{ route('fetch-stock-item') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        "prd": item,
                    },
                    success: function(data) {
                        $("#byProductRow_" + id).find('.byproduct-unit').html(data.options);
                    },
                    error: function(xhr) {
                        alert("Something went wrong. Please try again");
                    }
                });
            } else {
                alert("Something went wrong. Please try again");
            }
        }

        $(document).on('click', '#addExpenseRow', function(e) {
            e.preventDefault();
            var rowCount = $('#expenseSection .expenseRow:last').attr('id');
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            } else {
                rowCount = parseInt(rowCount) + parseInt(1);
            }
            var html = `<div class="row expenseRow" id="expenseRow_${rowCount}">
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Expense Ledger</label>
                                            <select class="form-select expense-ledger" id="" name="expense_ledger[]" required>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label class="form-label" for="product-title-input">Expense Amount</label>
                                            <input class="form-control" type="number" placeholder="Enter Expense Amount" name="expense_amount[]" required>
                                        </div>
                                    </div>
                                    <div class="col-md-1 d-flex justify-content-center align-items-center pt-4">
                                        <button type="button" class="btn btn-danger btn-sm removeExpenseRow" id="removeExpenseRow"><i class="las la-minus"></i></button>
                                    </div>
                                </div>`;
            $("#expenseSection").append(html);
            $('.expense-ledger').select2({
                placeholder: 'Select item',
                ajax: {
                    url: "/admin/get-expense-debit-ledgers",
                    type: "POST",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            _token: "{{ csrf_token() }}",
                            search: params.term,
                            page: params.page,
                            from_sales: true,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var results = data.data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name,
                            };
                        });

                        return {
                            results: results,
                            pagination: {
                                more: (params.page * data.per_page) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });
        });
        $(document).on('click', '.removeExpenseRow', function(e) {
            e.preventDefault();
            $(this).closest('.expenseRow').remove();
        })
    </script>
@endsection