@extends('components.layout.master')
@section('title', 'Order Management')
@section('module-icon', 'fab fa-product-hunt')
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Order Management</a></li>
        <li class="breadcrumb-item active">@yield('title')</li>
    </ol>
@endsection
@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <div class="row">
                                <div class="col-lg-12">
                                    <button type="button" title="" id="addOrderBtn"
                                        class="btn btn-success waves-effect waves-light float-right">
                                        <i class="fa fa-plus" aria-hidden="true"></i> Add New
                                    </button>

                                </div>
                            </div>
                            <br>

                            <table id="OrderTable" class="table table-bordered dt-responsive nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Buyer Name</th>
                                        <th>Mobile No.</th>
                                        <th>Date</th>
                                        <th>Products</th>
                                        <th>Quantity</th>
                                        <th>Total</th>
                                        {{-- <th>Status</th> --}}
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($orderBuyers->isEmpty())
                                    <tr>
                                        <td colspan="9">No records found.</td>
                                    </tr>
                                @else
                                    @foreach ($orderBuyers as $orderBuyer)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $orderBuyer->buyer->buyer_name ?? ' '}}</td>
                                            <td>{{ $orderBuyer->buyer->mobile_no ?? ' '}}</td>
                                            <td>{{ \Carbon\Carbon::parse($orderBuyer->generated_at)->format('d/m/Y') ?? '' }}</td>
                                            <td>
                                                @if($orderBuyer->id)
                                                    <button type="button" class="btn btn-primary view-products" data-toggle="modal" data-target="#productModal" data-order-id="{{ $orderBuyer->id }}">View</button>
                                                @else
                                                    <span>No products</span>
                                                @endif
                                            </td>
                                            <td>{{ $orderBuyer->quantity ?? ' '}}</td>
                                            <td>{{ $orderBuyer->total ?? ' '}}</td>
                                            <td>
                                                @if ($orderBuyer->action_status === 1)
                                                    <button class="btn btn-success">Accepted</button>
                                                @elseif ($orderBuyer->action_status === 0)
                                                    <button class="btn btn-danger">Rejected</button>
                                                @else
                                                <button class="btn btn-primary">Pending</button>
                                                @endif
                                            </td>
                                            {{-- <td>
                                                <select class="form-select change-status" data-id="{{ $orderBuyer->id }}">
                                                    <option value="1" data-color="green" {{ $orderBuyer->action_status == 1 ? 'selected' : '' }}>Accept</option>
                                                    <option value="0" data-color="red" {{ $orderBuyer->action_status == 0 ? 'selected' : '' }}>Reject</option>
                                                </select>
                                            </td> --}}
                                            
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->
               
            <!-- Start Add Order Modal -->
            <div class="modal fade admin-query" id="addOrderModal">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add Order</h4>
                            <button type="button" class="close dismissBtn" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form id="addOrderForm" enctype="multipart/form-data">
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="primary_input_label">Buyer Name * :</label>
                                        <select class="form-control select2" id="buyer_id" name="buyer_name">
                                            <option value="">Select Buyer Name</option>
                                            {{-- @foreach ($buyers as $buyer)
                                            <option value="{{ $buyer->id }}">{{ $buyer->buyer_name }}</option>
                                        @endforeach --}}
                                        </select>
                                        <div>
                                        <span class="text-danger" id="buyer_name_error"></span></div>
                                    </div>
                                   
                                </div>
            
                                <!-- Product Selection Table -->
                                <div class="row mb-3">
                                    <div class="col-lg-12">
                                        <table class="table table-bordered" id="productTable">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Product Type</th>
                                                    <th>Quantity</th>
                                                    <th>Rate per Kg</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                
                                                <!-- Dynamic Rows Will Be Added Here -->
                                            </tbody>
                                        </table>
                                        <button type="button" id="addProductRow" class="btn btn-success">+ Add Product</button>
                                    </div>
                                </div>
            
                                <div class="row mt-40">
                                    <div class="col-lg-12 text-center">
                                        <button class="btn btn-success waves-effect waves-light" type="submit">
                                            {!! BTN_SAVE !!}
                                        </button>
                                        <button class="btn btn-secondary btn-sm ml-2" type="reset" id="orderReset">
                                            <span class="ti-reload"></span> Reset
                                        </button>    
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Add Order Modal -->
            
            <!-- Show Product Modal -->
            <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="productModalLabel">Order Products</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 id="productModalContent" class="row">
                                <!-- Product table will be dynamically populated here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Product Modal -->

        </div><!-- container -->
        @include('components.footertext')
    </div>
@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function() {
      
        $('#addOrderBtn').on('click', function() {
          $('#addOrderModal').modal('show');
        });

        $('#buyer_id').select2({
           
           placeholder: "Search Buyer Name or Number",
           allowClear: true,
           ajax: {
               url: "{{ route('getBuyers') }}", // Update this with your route
               dataType: 'json',
               delay: 250,
               data: function(params) {
                   return {
                       search: params.term // Search term
                   };
               },
               processResults: function(data) {
                   return {
                       results: $.map(data, function(item) {
                           return {
                               id: item.id,
                               text: item.buyer_name + ' - ' + item.mobile_no 
                           };
                       })
                   };
               },
               cache: true
           }
        });

        let productOptions = `@foreach ($products as $product) 
                            <option value="{{ $product->id }}">{{ $product->name }}</option> 
                          @endforeach`;

            // Add Product Row
        $("#addProductRow").click(function () {
            let row = `<tr>
                            <td>
                                <select class="form-control product_id" name="products[]">
                                    <option value="">Select Product</option>
                                    ${productOptions}
                                </select>
                            </td>
                            <td>
                                <select class="form-control product_type_id" name="product_types[]" disabled>
                                    <option value="">Select Product Type</option>
                                </select>
                            </td>
                            <td><input type="number" class="form-control quantity" name="quantity[]" min="0" step="0.01" value="0.00"></td>
                            <td><input type="number" class="form-control rate_per_kg" name="rate_per_kg[]" step="0.01" min="0" value="0.00"></td>
                            <td><button type="button" class="btn btn-danger removeRow">X</button></td>
                    </tr>`;
            $("#productTable tbody").append(row);
        });

        $(document).on("click", ".removeRow", function () {
            $(this).closest("tr").remove();
        });

        $(document).on("change", ".product_id", function () {
            let productId = $(this).val();
            let row = $(this).closest("tr");
            let productTypeSelect = row.find(".product_type_id");

            if (productId) {
                $.ajax({
                    url: "{{ route('getProductTypes') }}",
                    method: "POST",
                    data: {
                        product_id: productId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (response) {
                        productTypeSelect.empty().append('<option value="">Select Product Type</option>');
                        $.each(response.productTypes, function (key, value) {
                            productTypeSelect.append(`<option value="${value.id}" data-quantity="${value.quantity}" data-rate="${value.rate_per_kg}">${value.type}</option>`);
                        });
                        productTypeSelect.prop("disabled", false);
                    }
                });
            } else {
                productTypeSelect.empty().append('<option value="">Select Product Type</option>').prop("disabled", true);
            }
        });

        $(document).on("change", ".product_type_id", function () {
            let selectedType = $(this).find(':selected');
            let row = $(this).closest("tr");

            let quantity = selectedType.data("quantity") || 0.00;
            let ratePerKg = selectedType.data("rate") || 0.00;

            row.find(".quantity").val(quantity);
            row.find(".rate_per_kg").val(ratePerKg);

        });

        $('.view-products').click(function() {
            
            var orderId = $(this).data('order-id');
            
            var modalContent = $('#productModalContent');
            modalContent.empty(); 

            $.ajax({
                url: '/order/' + orderId + '/products', 
                method: 'GET',
                success: function(response) {
                    
                    if (response && response.length > 0) {
                        var productTable = '<table class="table table-bordered"><thead><tr><th>Product Name</th><th>Product Type</th><th>Quantity</th><th>Rate per KG</th><th>Total</th></tr></thead><tbody>';

                        response.forEach(function(product) {
                            productTable += '<tr>';
                            productTable += '<td>' + product.product_name + '</td>';
                            productTable += '<td>' + product.product_type_name + '</td>';
                            productTable += '<td>' + product.quantity + '</td>';
                            productTable += '<td>' + product.rate_per_kg + '</td>';
                            productTable += '<td>' + product.total + '</td>';
                            productTable += '</tr>';
                        });

                        productTable += '</tbody></table>';
                        modalContent.append(productTable);
                    } else {
                        modalContent.append('<p>No products found for this order.</p>');
                    }
                },
                error: function() {
                    modalContent.append('<p>Error fetching order products.</p>');
                }
            });
        });

        $('#addOrderForm').on('submit', function(e) {
            e.preventDefault();
            let isValid = true;

            $(".text-danger").text("");

            let buyerId = $("#buyer_id").val();
            if (buyerId === "") {
                $("#buyer_name_error").text("Buyer Name is required.");
                isValid = false;
            }

            let products = [];
            $("#productTable tbody tr").each(function() {
                let product_id = $(this).find(".product_id").val();
                let product_type_id = $(this).find(".product_type_id").val();
                let quantity = $(this).find(".quantity").val();
                let rate_per_kg = $(this).find(".rate_per_kg").val();

                if (product_id && product_type_id && quantity > 0 && rate_per_kg > 0) {
                    products.push({
                        product_id: product_id,
                        product_type_id: product_type_id,
                        quantity: quantity,
                        rate_per_kg: rate_per_kg
                    });
                } else {
                    isValid = false;
                }
            });

            if (!isValid || products.length === 0) {
                Swal.fire("Error!", "Please fill all required fields.", "error");
                return;
            }

            $.ajax({
                url: "{{ route('create-order') }}",
                method: "POST",
                data: {
                    buyer_id: buyerId,
                    products: products,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire("Success!", response.message, "success");
                        $('#addOrderModal').modal('hide');
                        $('#addOrderForm')[0].reset();
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    } else {
                        Swal.fire("Error!", response.message, "error");
                    }
                },
                error: function(response) {
                    Swal.fire("Error!", "Failed to add order.", "error");
                }
            });
        });
       
        $('#OrderTable').DataTable({
            "language": {
                "paginate": {
                    "previous": "<",
                    "next": ">"
                }
            }
        });

        $('#addOrderModal').on('hidden.bs.modal', function () {
            $('#addOrderForm')[0].reset(); // Reset form fields
            $(".text-danger").text(""); // Clear validation messages
            $("#productTable tbody").empty();
            $('#buyer_id').val(null).trigger('change');  
        });

        $('#orderReset').on('click', function() {
            $('#buyer_id').val(null).trigger('change'); 
            $('#buyer_name_error').text('');
        });
    });

</script>
@endpush