@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            {{-- <!-- Display Error Message Here -->
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif --}}
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.EditPurchaseRequest') }}</h4>
                    <h6>{{ __('sitelabel.UpdatePurchaseRequest') }}</h6>
                </div>
            </div>

            <form method="post" action="{{ url('/editpurchaserequestprocess') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="hdPurchaseRequestId" value="{{ $purchaserequest->Id }}">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.RequestDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="txtRequestDate" id="txtRequestDate"
                                        value="{{ old('txtRequestDate', date('Y-m-d', strtotime($purchaserequest->RequestDate))) }}">
                                    <span class="text-danger">
                                        @error('txtRequestDate')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Department') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbDepartment" id="cmbDepartment">
                                        <option value="">Select Department</option>
                                        @foreach ($departments as $dept)
                                            <option value="{{ $dept->Id }}"
                                                {{ $dept->Id == $purchaserequest->DepartmentId ? 'selected' : '' }}>
                                                {{ $dept->Name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">
                                        @error('cmbDepartment')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.RequestedBy') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbRequestBy" id="cmbRequestBy">
                                        <option value="">Select Requested By</option>
                                        @foreach ($requests as $request)
                                            <option value="{{ $request->Id }}"
                                                {{ $request->Id == $purchaserequest->RequestBy ? 'selected' : '' }}>
                                                {{ $request->FullName }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger">
                                        @error('cmbRequestBy')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.RequestStatus') }}</label>
                                    <select class="form-control" name="request_status" id="request_status">
                                        <option value="1"
                                            {{ $purchaserequest->RequestStatus == 1 ? 'selected' : '' }}>Pending</option>
                                        <option value="2"
                                            {{ $purchaserequest->RequestStatus == 2 ? 'selected' : '' }}>Approved</option>
                                        <option value="3"
                                            {{ $purchaserequest->RequestStatus == 3 ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Description') }}</label>
                                    <textarea class="form-control" name="txtDescription" id="txtDescription" rows="4">{{ old('txtDescription', $purchaserequest->Description) }}</textarea>
                                </div>
                            </div>

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

                        <!-- Product Selection Section -->
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.Product') }}</th>
                                            <th>{{ __('sitelabel.PurchasePrice') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select class="form-select" id="cmbProduct">
                                                    <option value="">{{ __('sitelabel.SelectProduct') }}</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->Id }}">{{ $product->SKU }} -
                                                            {{ $product->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtPrice" step="0.01"
                                                    min="0">
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" id="txtQty" min="1">
                                            </td>
                                            <td>
                                                <button type="button" id="btnAdd" class="btn btn-success"
                                                    style="background-color: #F26E26;">
                                                    {{ __('sitelabel.Add') }}
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Selected Products Table -->
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Sr. No</th>
                                            <th>{{ __('sitelabel.Product') }}</th>
                                            <th>{{ __('sitelabel.PurchasePrice') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                            <th>{{ __('sitelabel.Total') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <!-- In your selected products table -->
                                    <tbody id="selectedProductsBody">
                                        @foreach ($purchaserequestdetails as $index => $detail)
                                            <tr id="row{{ $index + 1 }}">
                                                <td>{{ $index + 1 }}</td>
                                                <td>
                                                    {{ $detail->SKU }} - {{ $detail->ProductName }}
                                                    <input type="hidden" name="hdProductId[]"
                                                        value="{{ $detail->ProductId }}">
                                                </td>
                                                <td>
                                                    <input type="hidden" name="txtPurchasePrice[]"
                                                        value="{{ $detail->PurchasePrice }}">
                                                    {{ $detail->PurchasePrice }}
                                                </td>
                                                <td>
                                                    <input type="hidden" name="txtOrdQty[]"
                                                        value="{{ $detail->Quantity }}">
                                                    {{ $detail->Quantity }}
                                                </td>
                                                <td>{{ $detail->TotalAmount }}</td>
                                                <td>
                                                    <button type="button" class="btn btn-danger btn-sm"
                                                        onclick="confirmDelete({{ $index + 1 }})">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-primary">{{ __('sitelabel.Update') }}</button>
                            <button type="button" onclick="javascript:window.location='{{ url('/purchaserequest') }}';"
                                class="btn btn-dark">{{ __('sitelabel.Back') }}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Product</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to remove this product?</p>
                    <input type="hidden" id="deleteRowId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="removeProduct()">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        let rowCounter = {{ count($purchaserequestdetails) + 1 }};

        $(document).ready(function() {
            $('#cmbDepartment, #cmbProduct, #cmbRequestBy').select2({
                theme: "bootstrap-5"
            });

            $("#cmbProduct").change(function() {
                var ProductId = $("#cmbProduct").val();
                if (ProductId) {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('/') }}/api/GetProductById/" + ProductId,
                        success: function(data) {
                            $("#txtPrice").val(data[0]?.PurchasePrice || '');
                            $("#txtPrice").focus().select();
                        }
                    });
                }
            });

            $('#btnAdd').click(function() {
                const productSelect = $('#cmbProduct');
                const productId = productSelect.val();
                const productText = productSelect.find('option:selected').text();
                const price = $('#txtPrice').val();
                const qty = $('#txtQty').val();

                if (!productId || !price || !qty) {
                    alert('Please fill all product details');
                    return;
                }

                if (price <= 0 || qty <= 0) {
                    alert('Price and quantity must be greater than 0');
                    return;
                }

                // Check for duplicate product
                if ($(`input[name="hdProductId[]"][value="${productId}"]`).length > 0) {
                    alert('This product is already added');
                    return;
                }

                const total = (parseFloat(price) * parseInt(qty)).toFixed(2);
                const html = `
                <tr id="row${rowCounter}">
                    <td>${rowCounter}</td>
                    <td>
                        ${productText}
                        <input type="hidden" name="hdProductId[]" value="${productId}">
                    </td>
                    <td>
                        <input type="hidden" name="txtPurchasePrice[]" value="${price}">
                        ${price}
                    </td>
                    <td>
                        <input type="hidden" name="txtOrdQty[]" value="${qty}">
                        ${qty}
                    </td>
                    <td>${total}</td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm" 
                            onclick="confirmDelete(${rowCounter})">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;

                $('#selectedProductsBody').append(html);
                rowCounter++;

                productSelect.val('').trigger('change');
                $('#txtPrice').val('');
                $('#txtQty').val('');
            });

            $('form').submit(function(e) {
                const products = $('input[name="hdProductId[]"]').length;
                if (products === 0) {
                    e.preventDefault();
                    alert('Please add at least one product');
                }
            });
        });

        function confirmDelete(rowId) {
            $('#deleteRowId').val(rowId);
            $('#deleteConfirmModal').modal('show');
        }

        function removeProduct() {
            const rowId = $('#deleteRowId').val();
            $(`#row${rowId}`).remove();
            $('#deleteConfirmModal').modal('hide');
            $('#selectedProductsBody tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });
        }
    </script>
@endsection