@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="/agent/new/request/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="{{$agentRequest->request_number}}" 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="{{ $agentRequest->created_at->format('Y-m-d') }}" readonly />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                    <label for="request_status" class="col-sm-4 control-label">Request Status</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" name="request_status" class="form-control" id="request_status" value="{{$agentRequest->status}}" readonly />
                                                    </div>
                                                </div>
                                            
                                            </div>

                                        </div>
                                            <div class="row">
                                          <!-- 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">
                                                    <input type="text" name="customer_name" class="form-control" id="customer_name" value="{{ $agentRequest->agent->name }}" readonly />

                                                    
                                                        <input type="text" name="customer_id" class="form-control" id="customer_id" value="{{ $agentRequest->agent->id }}" style="display: none;" />

                                       
                                            </div>

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

                                <table class="table table-bordered">
                                    <tr>
                                        <th>&nbsp;</th>
                                        <th class="hidden-xs">Product Name</th>
                                        <th>Quantity</th>
                                        <th>Price</th>
                                        <th>Subtotal</th>
                                        <th>&nbsp;</th>
                                        <th>Status</th>
                                     
                                    </tr>
                                    <tbody id="product_table">
                                        @php
    $total = 0;
@endphp

@foreach($agentRequest->agentRequestItems as $agentRequestItem)
@php
$total += $agentRequestItem->subtotal; 
@endphp


<tr>
    <td></td>
    <td style="display:none" class="product-id">{{ $agentRequestItem->product->id }}</td>
    <td>{{ $agentRequestItem->product->product_name }}</td>
    <td>{{ $agentRequestItem->price }}</td>
    <td>{{ $agentRequestItem->quantity }}</td>

    <td>{{ $agentRequestItem->subtotal }}</td>

  

    <td class="hidden-print">

        @if($agentRequest->status== 'pending')
        <button type="button" class="btn btn-danger btn-sm remove-product">X</button>
        @else
        @if ($agentRequestItem->status != 'completed')
            <div class="btn-group action-btn-group">
                <button type="button" class="btn action-btn dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-cog"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="{{ url('admin/requests/complete/' . $agentRequestItem->id) }}" class="btn btn-success">Complete</a>
                    </li>
                    <li>
                        <a href="#"
                            class="btn btn-danger btn-return-product"
                            data-product-id="{{ $agentRequestItem->product->id }}"
                            data-max-quantity="{{ $agentRequestItem->quantity }}"
                            data-toggle="modal"
                            data-target="#productReturnModal">
                            Return
                        </a>
                    </li>
                </ul>
            </div>
        @endif
        @endif
    </td>
    <td>{{ $agentRequestItem->status }}</td>
   
</tr> 
@endforeach

                                    </tbody>

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

                                 
                                    <tr>
                                        <td colspan="6" class="text-center" id="totalRow">
                                            Total: {{ number_format($total, 2) }}
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>

                                <div class="row">
                                    <div class="col-md-12 col-sm-12">

                                        @if($agentRequest->status == 'pending')
                                        <a style="float: right;" id="submitRequestBtn" class="btn btn-success btn-block">Update Request</a>
                                        @endif
                                    </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>


<!-- Product Return Modal -->
<div class="modal fade" id="productReturnModal" tabindex="-1" role="dialog" aria-labelledby="productReturnModalLabel">
    <div class="modal-dialog" role="document">
        <form action="{{ url('Backoffice/requests/return-product') }}" method="POST">
            @csrf
            <input type="hidden" name="request_id" value="{{ $agentRequest->request_number }}">
            <input type="hidden" name="product_id" id="return_product_id"> <!-- This will be set by JS -->
            
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productReturnModalLabel">Return Product</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
    
                <div class="modal-body">
                    <div class="form-group">
                        <label for="return_quantity">Quantity to Return</label>
                        <input type="number" name="return_quantity" id="return_quantity" class="form-control" min="1" required>
                    </div>

                    <div class="form-group">
                        <label for="return_reason">Reason for Return</label>
                        <textarea name="return_reason" class="form-control" rows="3" placeholder="Enter reason..." required></textarea>
                    </div>
                </div>
    
                <div class="modal-footer">
                    <button type="submit" class="btn btn-warning">Submit Return</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>


  <script>

$(document).on('click', '.btn-return-product', function () {
    var productId = $(this).data('product-id');
    var maxQty = $(this).data('max-quantity');
    
    $('#return_product_id').val(productId);
    $('#return_quantity').attr('max', maxQty).val(''); // Clear and set max
});





            $(document).ready(function() {

                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));
}



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


                $('#product_id').on('change', function() {
                    var productId = $(this).val();

                    var agentId = $('#customer_id').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
                        }
                    });
                });

                $('#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 class="product-id" style="display:none">` + product_id + `</td>
    <td>` + product_name + `</td>
    <td class="quantity">
    ` + quantity + `
      
    </td>
    <td class="price">` + product_price + `</td>
   
    <td class="subtotal">` + 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();

                });

                $('#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