@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header m-3">
        <h1>Agent Product Request</h1>
    </section>
    <!-- Main content -->
    <section class="content" id="requestContent">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-success">
                    <div class="box-header"></div>
                    <div class="box-body">
                        @include('partials.flash')
                        <div class="row" ng-controller="SearchItemCtrl">

                            <div class="col-sm-12">
                                <div class="row">
                                    <form id="agentRequestForm" action="/Purchase/orders/new/post" method="POST">
                                        @csrf <!-- Include CSRF token for form security -->
                                        <div class="col-sm-4">
                                        <div class="form-group">
                                                <label for="request_no" class="col-sm-4 control-label">Request No.</label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="request_no" class="form-control" id="request_no" value="{{$action == 'add' ? $invoice : $request->invoice}}" readonly />
                                                </div>
                                            </div>
                                        
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label for="order_date" class="col-sm-4 control-label">Order Date</label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="order_date" class="form-control" id="order_date" value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" readonly />
                                                </div>
                                            </div>
                                        </div>
                                          <!-- Customer Field -->
                                          <div class="col-sm-4">
                                            <div class="form-group">
                                                <label for="customer_id" class="col-sm-4 control-label">Agent</label>
                                                <div class="col-sm-8">
                                                <select id="customer_dropdown"
                                                    class="form-control select2" name="customer_id" id="customer_id"
                                                    required>
                                                    <option value="">Select Customer</option>
                                                    @foreach ($agents as $agent)
                                                        <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            </div>
                                          </div>
                                </div>

                                <table class="table table-bordered">
                                    <tr>
                                        <th>&nbsp;</th>
                                        <th class="hidden-xs">Product Name</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Subtotal</th>
                                        <th>&nbsp;</th>
                                    </tr>
                                    <tbody id="product_table">
                                    </tbody>

                                    <tfoot>
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            <a href="#" data-toggle="modal" data-target=".product-modal-lg">{{__('Add Product')}}</a>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="6" class="text-center" id="totalRow">
                                            Total: 0.00
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>

                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <a style="float: right;" id="submitRequestBtn" class="btn btn-success btn-block">Submit Request</a>
                                    </div>
                                </div>
                                </form>

                                <div class="modal fade product-modal-lg" tabindex="-1" role="dialog" aria-labelledby="productModalLabel">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="productModalLabel">{{__('Product Details')}}</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-12 col-md-4">
                                                        <div class="form-group">
                                                            <select class="form-control" name="product_id" id="product_id">
                                                                <option value="" selected>Select product</option>
                                                           
                                                                @foreach($products as $product)
                                                                <option value="{{$product->id}}" data-name="{{$product->product_name}}">
                                                                    {{ $product->product_name }}
                                                                </option>
                                                            @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-4">
                                                        <div class="form-group">
                                                            <input type="number" name="product_price" class="form-control" id="product_price" placeholder="{{__('Price')}}" required readonly>

                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-4">
                                                        <div class="form-group">
                                                            <input type="number" name="item_quantity" class="form-control" id="item_quantity" placeholder="{{__('Qty')}}" required>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="text-right">
                                                    <button id="add_product_item" class="btn btn-success">{{trans('item.submit')}}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="box-footer"></div>
                </div>
            </div>
        </div>

        <script>







            $(document).ready(function() {
                $('#product_id').on('change', function() {
                    var productId = $(this).val();
                    var agentId = $('#customer_dropdown').val(); // agent/customer dropdown

    if (!agentId) {
        $.notify({ message: "Please select a customer first!" }, { type: 'danger' });
        $(this).val(''); // Reset the product dropdown
        return;
    }

                    $.ajax({
                        url: '/get-agent',
                        type: 'GET',
                        data: {
                            product_id: productId,
                            agent_id: agentId
                        },
                        success: function(response) {
                         //   $('#item_id').empty(); // Clear existing options

                         let product = response.product;
                        //    $('#item_id').append();
                        $('#product_price').val(product.product_price);

                      
                        },
                        error: function(xhr, status, error) {
                            console.error(error); // Handle error if needed
                        }
                    });
                });

                function calculateTotal() {
    var total = 0;
    console.log(total)

    $('#product_table tr').each(function(index) {
        var subtotal = parseFloat($(this).find('td:eq(5)').text());
        if (!isNaN(subtotal)) {
            total += subtotal;
        }

        console.log(subtotal)
    });

    // Update the total row
    $('#totalRow').html('Total: ' + total.toFixed(2));
}

                $('#add_product_item').on('click', function() {

   
                    var product_id = $('#product_id').val();

                    var exists = false;
                    $('#product_table tr').each(function(index) {
                        var existingProductId = $(this).find('td:eq(1)').text();

    if (existingProductId == product_id) {
        exists = true;
        return false; // break loop
    }
});

if (exists) {
      $.notify({ message: "This product is already in the list." }, { type: 'danger' });
      return;
} 

                    var product_name = $('#product_id option:selected').data('name');
                    var product_price = $('#product_price').val();
                    var quantity = $('#item_quantity').val();

                    var subtotal = product_price * quantity;

                    var newRow = '<tr><td></td><td style="display:none" class="product-id">' + product_id + '</td><td>' + product_name + '</td><td>' + product_price + '</td><td>' + quantity + '</td><td>' + subtotal + '</td><td><button type="button" class="btn btn-danger btn-sm remove-product">X</button></td></tr>';



                    $('#product_table').append(newRow);

                 

                    // Clear the form fields after adding the row
                    $('#product_id').val('');
                    $('#product_price').val(0);
                    $('#item_quantity').val(0);

                    calculateTotal();
                });

                $('#product_table').on('click', '.remove-product', function() {
    $(this).closest('tr').remove();
    calculateTotal();
});

                $('#submitRequestBtn').click(function() {


                    if ($('#product_table tr').length === 0) {
        $.notify({ message: "Please add at least one product before submitting the request." }, { type: 'danger' });
        return;
    }
                    var formData = {};

                    $('#product_table tr').each(function(index) {
                        var product_id = $(this).find('td:eq(1)').text();
                        var product_name = $(this).find('td:eq(2)').text();
                        var product_price = $(this).find('td:eq(3)').text();
                        var quantity = $(this).find('td:eq(4)').text();
                        var subtotal = $(this).find('td:eq(5)').text();

                        formData['item_' + (index + 1)] = {
                            product_id: product_id,
                            product_price: product_price,
                            quantity: quantity,
                            subtotal: subtotal
                        };
                    });

                    $.each(formData, function(key, value) {
                        $('#agentRequestForm').append($('<input>', {
                            type: 'hidden',
                            name: 'formData[' + key + '][product_id]',
                            value: value.product_id
                        }));
                        $('#agentRequestForm').append($('<input>', {
                            type: 'hidden',
                            name: 'formData[' + key + '][product_price]',
                            value: value.product_price
                        }));
                        $('#agentRequestForm').append($('<input>', {
                            type: 'hidden',
                            name: 'formData[' + key + '][quantity]',
                            value: value.quantity
                        }));
                        $('#agentRequestForm').append($('<input>', {
                            type: 'hidden',
                            name: 'formData[' + key + '][subtotal]',
                            value: value.subtotal
                        }));
                    });

                    $('#agentRequestForm').submit();
                });
            });


     
        </script>
    </section>
</div>
@endsection

@section('script')
    <script type="text/javascript" src="{{asset('js/angular.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/recevings.js')}}"></script>
@endsection