@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.CreatenewStoreRequisition') }}</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('/storerequisitionprocess') }}" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <!-- BillNo Field -->
                            <div class="col-lg-4 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.BillNo') }}<span class="text-danger">*</span></label>
                                    <input type="text" readonly class="form-control" id="txtBillNo" name="txtBillNo"
                                        value="{{ $billNo }}">
                                </div>
                            </div>

                            <!-- Requisition Date Field -->
                            <div class="col-lg-4 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.RequisitionDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="txtRequisitionDate"
                                        name="txtRequisitionDate" value="{{ old('txtRequisitionDate') }}" required>
                                    <span class="text-danger">
                                        @error('txtRequisitionDate')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

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

                            {{-- Department Dropdown Field --}}
                            <div class="col-lg-4 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Department') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" data-placeholder="{{ __('sitelabel.SeleactDepartment') }}"
                                        name="cmbDepartment" id="cmbDepartment" required>
                                        <option value="">{{ __('sitelabel.SeleactDepartment') }}</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->Id }}">{{ $department->Name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">
                                        @error('cmbDepartment')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

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

                            <!-- Status Field -->
                            <div class="col-lg-4 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>

                        <input type="hidden" id="rowsData" name="rowsData" value="">

                        <!-- First Table For Add Details -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <table class="table table-bordered" id="requisitionTable">
                                    <thead style="background-color: #0C143C">
                                        <tr>
                                            <th style="color: #fff">{{ __('sitelabel.ItemCode') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.ItemName') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Quantity') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.AvailableQuantity') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr style="background-color: rgb(192, 192, 192)">
                                            <td>
                                                <select class="form-control" id="ddlItemCode">
                                                    <option value="" disabled selected>
                                                        {{ __('sitelabel.SelectItemCode') }}</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->Id }}"
                                                            data-sku="{{ $product->SKU }}">{{ $product->SKU }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-control" id="ddlItemName">
                                                    <option value="" disabled selected>
                                                        {{ __('sitelabel.SelectItemName') }}</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->Id }}">{{ $product->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtQty" name="txtQty"
                                                    min="0" value="1" required>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtAvailableQty"
                                                    name="txtAvailableQty" value="1" readonly>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-primary" id="addRowButton">
                                                    {{ __('sitelabel.Add') }}
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Second Table -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <table class="table table-bordered" id="itemsTable">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Code') }}</th>
                                            <th>{{ __('sitelabel.ItemName') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                            <th>{{ __('sitelabel.AvailableQuantity') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Rows will be dynamically added via JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Submit -->
                        <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('/storerequisition') }}';">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

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

            // Function to sync dropdowns
            function syncDropdowns() {
                $('#ddlItemCode, #ddlItemName').on('change', function() {
                    const selectedValue = $(this).val();
                    const sourceId = $(this).attr('id');

                    if (sourceId === 'ddlItemCode') {
                        $('#ddlItemName').val(selectedValue).trigger('change.select2');
                    } else {
                        $('#ddlItemCode').val(selectedValue).trigger('change.select2');
                    }
                });
            }

            // Call the sync function
            syncDropdowns();

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

            $('#addRowButton').on('click', function() {
                const itemCode = $('#ddlItemCode').val();
                const itemName = $('#ddlItemName').val();
                const sku = $('#ddlItemCode option:selected').data('sku');
                const quantity = $('#txtQty').val();

                // Validation
                if (!itemCode || !itemName) {
                    alert("Please select valid Product.");
                    return;
                }
                if (quantity <= 0) {
                    alert("Please enter a valid Quantity.");
                    return;
                }

                const newRow = `
                    <tr id="row-${RowId}" data-item-code="${sku}" data-product-id="${itemCode}">
                        <td>${RowId}</td>
                        <td>${sku}</td>
                        <td>${$('#ddlItemName option:selected').text()}</td>
                        <td>
                            <input type="number" class="form-control row-qty" 
                                data-row-id="${RowId}" min="0" value="${quantity}">
                        </td>
                        <td>
                            <input type="number" class="form-control" 
                                data-row-id="${RowId}" value="1" readonly>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm remove-row" 
                                data-row-id="${RowId}">{{ __('sitelabel.Delete') }}</button>
                        </td>
                    </tr>
                `;

                $('#itemsTable tbody').append(newRow);

                RowId++;
                resetDropdowns();
                updateRowsData();

                $('#txtQty').val(1);
                $('#txtAvailableQty').val(1);

                $('#saveButton').prop('disabled', false);
            });

            $(document).on('change', '.row-qty', function() {
                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();
                    const availableQty = $(this).find('td:nth-child(5) input').val();

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

                $('#rowsData').val(JSON.stringify(rowsData));
            }

            function resetDropdowns() {
                $('#ddlItemCode, #ddlItemName').val('').trigger('change');
            }

            // Remove Row Logic
            $(document).on('click', '.remove-row', function() {
                const rowId = $(this).data('row-id');
                $(`#row-${rowId}`).remove();
                updateRowsData();

                if ($('#itemsTable tbody tr').length === 0) {
                    $('#saveButton').prop('disabled', true);
                }
            });

            // Make functions globally available
            window.resetDropdowns = resetDropdowns;
        });
    </script>
@endsection