@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.UpdateProductOutsource') }}</h4>
                </div>
            </div>

            <form method="post" action="{{ url('/editproductoutsourceprocess') }}" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <input type="hidden" value="{{ $productoutsource->Id }}" name="hbid">
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Vendor') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbVendor" id="cmbVendor">
                                        <option value="">{{ __('sitelabel.SeleactVendor') }}</option>
                                        @foreach ($vendor as $item)
                                            <option value="{{ $item->Id }}"
                                                {{ $productoutsource->VendorId == $item->Id ? 'selected' : '' }}>
                                                {{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Date') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="txtDate" name="txtDate" required
                                        value="{{ $productoutsource->Date }}">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Product') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbProduct" id="cmbProduct">
                                        <option value="">{{ __('sitelabel.SelectProduct') }}</option>
                                        @foreach ($product as $item)
                                            <option value="{{ $item->Id }}"
                                                {{ $productoutsource->ProductId == $item->Id ? 'selected' : '' }}>
                                                {{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Quantity') }}<span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" id="txtQuantity"
                                        name="txtQuantity" value="{{ $productoutsource->Quantity }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Return') }}<span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" id="txtReturn"
                                        name="txtReturn" value="{{ $productoutsource->Return }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.TotalProduct') }}</label>
                                    <input type="text" class="form-control" id="txtTotalProduct" name="txtTotalProduct"
                                        value="0" readonly>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Send') }}<span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" id="txtSend" name="txtSend"
                                        value="{{ $productoutsource->Send }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.SendRate') }}<span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" id="txtSendRate"
                                        name="txtSendRate" value="{{ $productoutsource->SendRate }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.TotalSend') }}</label>
                                    <input type="text" class="form-control" id="txtTotalSend" name="txtTotalSend"
                                        value="0" readonly>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Waste') }}<span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" id="txtWaste" name="txtWaste"
                                        value="{{ $productoutsource->Waste }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.WasteRate') }}<span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" id="txtWasteRate"
                                        name="txtWasteRate" value="{{ $productoutsource->WasteRate }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.TotalWaste') }}</label>
                                    <input type="text" class="form-control" id="txtTotalWaste" name="txtTotalWaste"
                                        value="0" readonly>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Stock') }}</label>
                                    <input type="text" class="form-control" id="txtStock" name="txtStock"
                                        value="0" readonly>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.SeleactPaymentType') }}<span
                                            class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbPaymentType" id="cmbPaymentType"
                                        onchange="togglePaymentFields()">
                                        <option value="-1">{{ __('sitelabel.SeleactPaymentType') }}</option>
                                        @foreach ($paymenttype as $paymenttype)
                                            @if ($productoutsource->PaymentTypeId == $paymenttype->Id)
                                                <option selected value="{{ $paymenttype->Id }}">
                                                    {{ $paymenttype->Name }}</option>
                                            @else
                                                <option value="{{ $paymenttype->Id }}">{{ $paymenttype->Name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PaymentDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="txtPaymentDate" name="txtPaymentDate"
                                        value="{{ $productoutsource->PaymentDate }}" required>
                                </div>
                            </div>
                            <div id="bankFields" style="display: none;" class="row">
                                <div class="col-lg-4 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.SeleactBank') }}</label>
                                        <select class="form-select" name="cmbBank" id="cmbBank">
                                            <option value="-1">{{ __('sitelabel.SeleactBank') }}</option>
                                            @foreach ($bankWithBranches->unique('BankId') as $bank)
                                                <option value="{{ $bank->BankId }}"
                                                    @if ($productoutsource->BankId == $bank->BankId) selected @endif>
                                                    {{ $bank->BankName }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.SelectBranch') }}</label>
                                        <select class="form-select" name="cmbBranch" id="cmbBranch">
                                            <option value="-1">{{ __('sitelabel.SelectBranch') }}</option>
                                            {{-- Branch options will be populated dynamically --}}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.ChequeNO') }}</label>
                                        <input type="text" class="form-control" id="txtChequeNO" name="txtChequeNO"
                                            value="{{ $productoutsource->ChkNo }}">
                                    </div>
                                </div>

                                <div class="col-lg-4 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.ChequeDate') }}</label>
                                        <input type="date" class="form-control" id="txtChequeDate" name="txtChequeDate"
                                            value="{{ $productoutsource->ChkDate }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label>{{ __('sitelabel.ChequeCashDate') }}</label>
                                        <input type="date" class="form-control" id="txtChequeCashDate"
                                            name="txtChequeCashDate" value="{{ $productoutsource->ChkCashDate }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Advance') }}<span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" class="form-control" id="txtExpense"
                                        name="txtExpense" value="{{ $productoutsource->Expense }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Balance') }}</label>
                                    <input type="text" class="form-control" id="txtBalance" name="txtBalance"
                                        value="0" readonly>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus"
                                        {{ $productoutsource->Status == 1 ? 'checked' : '' }}>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary">{{ __('sitelabel.Save') }}</button>
                                <button type="button"
                                    onclick="javascript:window.location='{{ url('/productoutsource') }}';"
                                    class="btn btn-dark">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        window.onload = myOnload;

        function myOnload() {
            @if (session()->get('locale') == 'ur')
                MakeTextBoxUrduEnabled(txtName);
            @endif
        }

        const elements = {
            quantity: document.getElementById('txtQuantity'),
            return: document.getElementById('txtReturn'),
            totalProduct: document.getElementById('txtTotalProduct'),
            send: document.getElementById('txtSend'),
            sendRate: document.getElementById('txtSendRate'),
            totalSend: document.getElementById('txtTotalSend'),
            waste: document.getElementById('txtWaste'),
            wasteRate: document.getElementById('txtWasteRate'),
            totalWaste: document.getElementById('txtTotalWaste'),
            stock: document.getElementById('txtStock'),
            expense: document.getElementById('txtExpense'),
            balance: document.getElementById('txtBalance')
        };

        function calculateTotalProduct() {
            const qty = parseFloat(elements.quantity.value) || 0;
            const returned = parseFloat(elements.return.value) || 0;
            elements.totalProduct.value = (qty - returned).toFixed(2);
            calculateTotalStock();
        }

        function calculateTotalSend() {
            const send = parseFloat(elements.send.value) || 0;
            const sendRate = parseFloat(elements.sendRate.value) || 0;
            elements.totalSend.value = (send * sendRate).toFixed(2);
            calculateTotalBalance();
            calculateTotalStock();
        }

        function calculateTotalWaste() {
            const waste = parseFloat(elements.waste.value) || 0;
            const wasteRate = parseFloat(elements.wasteRate.value) || 0;
            elements.totalWaste.value = (waste * wasteRate).toFixed(2);
            calculateTotalBalance();
            calculateTotalStock();
        }

        function calculateTotalBalance() {
            const totalSend = parseFloat(elements.totalSend.value) || 0;
            const totalWaste = parseFloat(elements.totalWaste.value) || 0;
            const expense = parseFloat(elements.expense.value) || 0;

            const balance = totalSend - (totalWaste + expense);
            elements.balance.value = balance.toFixed(2);
        }

        function calculateTotalStock() {
            const totalProduct = parseFloat(elements.totalProduct.value) || 0;
            const send = parseFloat(elements.send.value) || 0;
            const waste = parseFloat(elements.waste.value) || 0;

            const stock = totalProduct - (send + waste);
            elements.stock.value = stock.toFixed(2);
        }

        function addEventListeners() {
            // Product calculation listeners
            elements.quantity.addEventListener('input', calculateTotalProduct);
            elements.return.addEventListener('input', calculateTotalProduct);

            // Send calculation listeners
            elements.send.addEventListener('input', calculateTotalSend);
            elements.sendRate.addEventListener('input', calculateTotalSend);

            // Waste calculation listeners
            elements.waste.addEventListener('input', calculateTotalWaste);
            elements.wasteRate.addEventListener('input', calculateTotalWaste);

            // Balance calculation listener
            elements.expense.addEventListener('input', calculateTotalBalance);
        }

        $(document).ready(function() {
            $('#cmbVendor, #cmbProduct, #cmbPaymentType, #cmbBank, #cmbBranch').select2({
                theme: "bootstrap-5",
            });

            // Set the initial branch ID from the server-side data
            var initialBranchId = "{{ $employeepayment->BranchId ?? '' }}";

            $("#cmbBank").change(function() {
                var BanksId = $("#cmbBank").val();
                $('#cmbBranch').empty(); // Clear existing options

                if (BanksId !== "-1") { // Ensure a valid bank is selected
                    $.ajax({
                        type: "GET",
                        url: "{{ url('/') }}/api/getBankBranches/" + BanksId,
                        success: function(data) {
                            $('#cmbBranch').append(data); // Append returned options
                        },
                        error: function(xhr, status, error) {
                            console.error("Error fetching branches:", error);
                            alert("Failed to load branches. Please try again.");
                        }
                    });
                }
            });

            $("#btnTranslate").click(function() {
                var Transword = $("#txtName").val();
                $.ajax({
                    type: "GET",
                    url: "/translateword/" + Transword,
                    contentType: "application/json;charset=utf-8",
                    success: function(data) {
                        $("#txtOtherName").val(data);
                    }
                });
            });

            addEventListeners();

            // Initialize all calculations
            calculateTotalProduct();
            calculateTotalSend();
            calculateTotalWaste();
            calculateTotalBalance();
            calculateTotalStock();
            togglePaymentFields();
        });

        function togglePaymentFields() {
            const paymentType = document.getElementById('cmbPaymentType').value;
            const bankFields = document.getElementById('bankFields');

            // Reset fields
            bankFields.style.display = 'none';

            // Show fields based on payment type
            if (paymentType == 4 || paymentType == 5 || paymentType == 6) {
                bankFields.style.display = 'flex';
            } else {
                $("#cmbBank").val("-1").trigger("change");
                $("#cmbBranch").val("-1").trigger("change");
                $("#txtChequeNO").val("");
                $("#txtChequeDate").val("");
                $("#txtChequeCashDate").val("");

                bankFields.style.display = 'none';
            }
        }

        document.addEventListener('DOMContentLoaded', togglePaymentFields);
    </script>
@endsection