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

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form method="post" action="{{ url('/storerequisitionissueprocess') }}" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.RequisitionNo') }}<span class="text-danger">*</span></label>
                                    <select name="cmbRequisitionNo" id="cmbRequisitionNo" class="form-select">
                                        <option value="">{{ __('sitelabel.SelectRequisitionNo') }}</option>
                                        @foreach ($requisitionno as $item)
                                            <option value="{{ $item->Id }}">{{ $item->BillNo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Employee') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbEmployee" id="cmbEmployee">
                                        <option value="">{{ __('sitelabel.SeleactEmployee') }}</option>
                                        @foreach ($employees as $item)
                                            <option value="{{ $item->Id }}">{{ $item->FullName }}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">
                                        @error('cmbEmployee')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.JobNo') }}</label>
                                    <input type="text" class="form-control" id="txtJobNo" name="txtJobNo"
                                        value="{{ old('txtJobNo', '') }}" readonly>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus" checked>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>{{ __('sitelabel.Note') }}</label>
                                <textarea class="form-control" id="txtNote" name="txtNote"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="row">
                            <input type="hidden" id="rowsData" name="rowsData" value="">
                            <div class="col-lg-12">
                                <table class="table table-bordered" id="itemsTable">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.Name') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot>
                                        <tr>
                                            <td>{{ __('sitelabel.TotalQty') }}</td>
                                            <td id="totalQty">
                                                <input type="text" name="txtTotalQty" id="txtTotalQty" readonly
                                                    class="form-control" value="0">
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="row mt-4">
                                <div class="col-lg-12">
                                    <button type="submit" class="btn btn-primary" id="saveButton"
                                        disabled>{{ __('sitelabel.Save') }}</button>
                                    <button type="button" class="btn btn-dark"
                                        onclick="javascript:window.location='{{ url('/storerequisitionissue') }}';">{{ __('sitelabel.Back') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var RowId = 1;
        $(document).ready(function() {
            // Initialize Select2
            $('#cmbEmployee, #cmbRequisitionNo').select2({
                theme: "bootstrap-5",
            });

            const itemsTable = document.querySelector('#itemsTable tbody');
            const rowsDataInput = document.querySelector('#rowsData');

            function calculateTotalQuantity() {
                let total = 0;
                $('.row-qty').each(function() {
                    const qty = parseFloat($(this).val()) || 0;
                    total += qty;
                });
                $('#txtTotalQty').val(total.toFixed(2));
            }

            $(document).on('input', '.row-qty', function() {
                calculateTotalQuantity();
                updateRowsData();
            });
            
            function updateRowsData() {
                const rowsData = [];

                $('#itemsTable tbody tr').each(function() {
                    const productId = $(this).data('product-id');
                    const itemName = $(this).find('td:nth-child(3)').text();
                    const quantity = $(this).find('.row-qty').val();

                    rowsData.push({
                        productId: productId,
                        itemName: itemName,
                        quantity: quantity
                    });
                });

                $('#rowsData').val(JSON.stringify(rowsData));
            }
            $('#cmbRequisitionNo').on('change', function() {
                const requisitionId = $(this).val();

                if (requisitionId) {
                    $.ajax({
                        url: '/api/get-requisition-details/' + requisitionId,
                        type: 'GET',
                        success: function(response) {
                            const requisition = response.requisition;
                            const details = response.details;

                            // Update Employee, JobNo, and Note fields
                            $('#cmbEmployee').val(requisition.EmployeeId).trigger(
                                'change.select2');
                            $('#txtJobNo').val(requisition.JobNo);
                            $('#txtNote').val(requisition.Note);

                            // Clear existing table rows
                            $('#itemsTable tbody').empty();

                            // Add new rows based on the fetched details
                            details.forEach(detail => {
                                const newRow = `
                                    <tr data-product-id="${detail.ItemId}">
                                        <td>${detail.ItemName}</td>
                                        <td><input type="number" class="form-control row-qty" value="${detail.Quantity}" /></td>
                                    </tr>
                                `;
                                $('#itemsTable tbody').append(newRow);
                                RowId++;
                            });

                            calculateTotalQuantity();

                            // Enable the save button
                            $('#saveButton').prop('disabled', false);
                        },
                        error: function(xhr) {
                            console.error('Error fetching requisition details:', xhr
                                .responseText);
                        }
                    });
                } else {
                    // Clear fields if no requisition is selected
                    $('#cmbEmployee').val('').trigger('change.select2');
                    $('#txtJobNo').val('');
                    $('#txtNote').val('');
                    $('#itemsTable tbody').empty();
                    $('#txtTotalQty').val('0');
                    $('#saveButton').prop('disabled', true);
                }
            });
        });
    </script>
@endsection