@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>Add Purchase Request</h4>
                    <h6>Create new purchase request</h6>
                </div>
            </div>

            <form method="post" action="{{ url('/purchaserequestprocess') }}" enctype="multipart/form-data">
                @csrf
                <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>Request Date<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="txtRequestDate" id="txtRequestDate"
                                        value="{{ old('txtRequestDate', date('Y-m-d')) }}">
                                    <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>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->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>Requested By<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->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>Request Status</label>
                                    <select class="form-control" name="request_status" id="request_status">
                                        <option value="1" {{ old('request_status') == 1 ? 'selected' : '' }}>
                                            Pending</option>
                                        <option value="2" {{ old('request_status') == 2 ? 'selected' : '' }}>
                                            Approved</option>
                                        <option value="3" {{ old('request_status') == 3 ? 'selected' : '' }}>
                                            Rejected</option>
                                    </select>
                                </div>
                            </div>

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

                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>Status</label>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus"
                                            checked>
                                    </div>
                                </div>
                            </div>


                        </div>

                        <!-- Product Selection Section -->
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th>Purchase Price</th>
                                            <th>Quantity</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select class="form-select" id="cmbProduct">
                                                    <option value="">Select Product</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;">
                                                    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>Product</th>
                                            <th>Purchase Price</th>
                                            <th>Quantity</th>
                                            <th>Total</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="selectedProductsBody">
                                        <!-- Dynamic rows will be added here -->
                                    </tbody>
                                </table>
                            </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('/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 = 1;

        $(document).ready(function() {
            // Initialize select2 for better dropdown experience
            $('#cmbDepartment, #cmbProduct, #cmbRequestBy').select2({
                theme: "bootstrap-5"
            });

            $("#cmbProduct").change(function() {
                var ProductId = $("#cmbProduct").val();
                $.ajax({
                    type: "GET",
                    url: "{{ url('/') }}/api/GetProductById/" + ProductId,
                    contentType: "application/json;charset=utf-8",
                    success: function(data) {

                        // jQuery.each(response, function (key, item) {
                        $.each(data, function(key, item) {
                            for (var index = 0; index < item.length; index++) {
                                $("#cmbProduct").val(item[index].Id);
                                $("#txtPrice").val(item[index].PurchasePrice);
                                if (item[index].PurchasePrice == 0) {
                                    $("#txtPrice").val('');
                                }
                                $("#txtPrice").focus().select();

                            }
                        });
                    }
                });
            });

            // Add product button click handler
            $('#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();

                // Validation
                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;
                }

                // Calculate total
                const total = (parseFloat(price) * parseInt(qty)).toFixed(2);

                // Add row to table
                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++;

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

            // Form submission validation
            $('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');
        }
    </script>
@endsection