@extends('layouts.admin.app')

@section('content')

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> --}}

<main id="main" class="main">
    <div class="pagetitle">
        <h1>Order</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/admin/order') }}">Home</a></li>
                <li class="breadcrumb-item active"><a href="{{ route('admin.order.view', base64_encode($order->id)) }}">{{ $order->unique_order_id }}</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div>

    <section class="section contact">
        <div class="product_content">
            <h4>{{ $order->unique_order_id }}</h4>
            <form action="{{ url('/admin/order/view/edit/' . encrypt($order->id)) }}" method="POST">
                @csrf

                @php 
                $agentIndex = 0; 
                @endphp
                <div id="appendedProduct">
                    @foreach($tableItem as $tableItems)
                    @php  $productIndex = 0; @endphp
                    <table class="table assigntbl AgentAssigndProduct tab{{$agentIndex}}">
                        {{-- <thead>
                            <tr>
                                <th>Agent</th>
                                <th>Details</th>
                            </tr>
                        </thead> --}}
                        <tbody>

                            <tr>
                                <td width="30%">
                                    <input class="form-control" name="agents[{{ $agentIndex }}][agent_order_id][]" value="{{$tableItems['agent_order_id']}}" disabled style="width:100%; margin-bottom: 10px; font-weight: bold;"/>
                                    <input class="form-control" name="agents[{{ $agentIndex }}][agent_order_id]" value="{{$tableItems['agent_order_id']}}" type="hidden"/>
                                </td>
                                <td width="30%">
                                    <input class="form-control" name="agents[{{ $agentIndex }}][agentAssignId]" value="{{$tableItems['agentAssignId']}}" type="hidden"/>
                                    <select name="agents[{{ $agentIndex }}][agent_id]" class="form-control agent-select getAgentId" data-id="{{ $agentIndex }}" style="width:250px" disabled>
                                        <option value="">Select Agent</option>
                                        @foreach($agents as $agent)
                                        <option value="{{ $agent->id }}" {{ $tableItems['agent']->id == $agent->id ? 'selected' : '' }}>
                                            {{ ucwords($agent->name) }}
                                        </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td width="40%" style="text-align:right;">
                                    <a class="btn btn-danger" href="{{ url('/admin/order/view/delete/' . encrypt($order->id) . '/' . encrypt($tableItems['agentAssignId'])) }}" onclick="return confirm('Do you really want to Remove this Agent Permanently?');" type="button" >Remove</a>
                                </td>
                            </tr>


                            <tr>
                                
                                <td colspan="3">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>Price</th>
                                                <th>QTY</th>
                                                <th class="imageLinkHeader" >Image</th>
                                                <th class="textHeader" >Text</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="AppendPrice">
                                            @php $addBtnRmv = 0; @endphp
                                            @forelse($tableItems['products'] as $product)
                                            <tr class="default-row">
                                                <td>
                                                    
                                                    <select name="agents[{{$agentIndex}}][{{$productIndex}}][products][]" class="form-control product-select" data-agent-index="{{$agentIndex}}" data-product-index="{{$productIndex}}" required>
                                                        <option value="">Please Select Product</option>
                                                        @foreach($agent_product_list as $agent_product_lists)
                                                            @if($agent_product_lists->agent_id == $tableItems['agent']->id || $agent_product_lists->agent_id == 1)
                                                                <option value="{{ $agent_product_lists->id }}" {{ $agent_product_lists->id == $product['product']->id ? 'selected' : '' }}>
                                                                    {{ $agent_product_lists->fnid }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                        <input class="form-control product_price" name="agents[{{$agentIndex}}][{{$productIndex}}][product_prices][]" value="{{ $product['price'] }}" required />
                                                    </div>
                                                </td>
                                                <td>
                                                    <input class="form-control product_qty" name="agents[{{$agentIndex}}][{{$productIndex}}][product_qty][]" value="{{ $product['qty'] }}" required />
                                                </td>
                                                <td>
                                                    @if($product['imagePath'])
                                                        @php 
                                                            $imagePathDecoded = json_decode($product['imagePath'], true); 
                                                            $flatImages = collect($imagePathDecoded)->flatten(); // In case it's nested arrays

                                                        @endphp
                                                        <textarea class="form-control imgLink" name="agents[{{$agentIndex}}][{{$productIndex}}][imgLink][]" rows="2" cols="20">
                                                    @foreach($flatImages as $img)
                                                    {{ trim($img) }}
                                                    @endforeach
                                                        </textarea>
                                                    @endif
                                                </td>
                                                
                                                <td>
                                                    @if($product['imageText'])
                                                        <textarea class="form-control text" name="agents[{{$agentIndex}}][{{$productIndex}}][text][]" rows="2" cols="20" >{{$product['imageText']}}</textarea>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($addBtnRmv > 0)
                                                        <a href="{{ url('/admin/order/view/delete/' . encrypt($product['id'])) }}" onclick="return confirm('Do you really want to Remove this Product Permanently?');"  class="btn btn-warning" type="button"><i class="bx bxs-trash"></i></a>
                                                    
                                                    @else
                                                    <div style="display:flex; gap:3px">
                                                        <a href="{{ url('/admin/order/view/delete/' . encrypt($product['id'])) }}" onclick="return confirm('Do you really want to Remove this Agent Permanently?');"  class="btn btn-warning" type="button" ><i class="bx bxs-trash"></i></a>
                                                        <button class="btn btn-success btn_addProduct" data-agent-index="{{ $agentIndex }}">(+)</button>
                                                    </div>
                                                    @endif
                                                </td>
                                               
                                                 @php $addBtnRmv++; @endphp
                                            </tr>
                                            @php $productIndex++; @endphp
                                            @empty
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td  style="text-align: right;">
                                                    <button class="btn btn-success btn_addProduct" data-agent-index="{{ $agentIndex }}">(+)</button>
                                                </td>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </td>
                            </tr>

                            <!-- Delivery Info -->
                            <tr>
                                
                                <td colspan="3">
                                    <table class="table TotalProductPrice">
                                        <thead>
                                            <tr>
                                                <th>Delivery Type</th>
                                                <th>Delivery Charge</th>
                                                <th>Total Price</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <select name="agents[{{$agentIndex}}][delivery_type]" class="form-control deliveryType" data-agent-index="{{ $agentIndex }}" required>
                                                        <option value="" selected>Select Delivery Type</option>
                                                        <option value="s_delivery" {{ $tableItems['delivery_type'] == 's_delivery' ? 'selected' : '' }}>STANDARD</option>
                                                        <option value="e_delivery" {{ $tableItems['delivery_type'] == 'e_delivery' ? 'selected' : '' }}>FIXED TIME</option>
                                                        <option value="m_delivery" {{ $tableItems['delivery_type'] == 'm_delivery' ? 'selected' : '' }}>MIDNIGHT</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    

                                                    @if($tableItems['delivery_type'] == 's_delivery')
                                                        @php $value = $tableItems['delivery_price']->s_delivery; @endphp
                                                    @elseif($tableItems['delivery_type'] == 's_delivery')
                                                        @php $value = $tableItems['delivery_price']->e_delivery; @endphp
                                                    @else
                                                        @php $value = $tableItems['delivery_price']->m_delivery; @endphp
                                                    @endif

                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                        <input class="form-control delivery_type_price" name="agents[{{$agentIndex}}][delivery_type_price]" value="{{ $value }}" required readonly/>
                                                    </div>
                                                    
                                                </td>
                                                <td>

                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                        <input class="form-control totalprice" name="agents[{{$agentIndex}}][total_price]" value="{{ $tableItems['totalPrice'] }}" required readonly/>
                                                    </div>
                                                    
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </td>
                            </tr>

                            <!-- Delivery Date/Time -->
                            <tr>
                                
                                <td colspan="3">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Delivery Date</th>
                                                <th>Delivery Time</th>
                                                <th>Any Instructions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <input type="date" class="form-control" name="agents[{{$agentIndex}}][date]" value="{{ $tableItems['delivery_date'] }}" required />
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" name="agents[{{$agentIndex}}][time]" value="{{ $tableItems['delivery_time'] }}" required />
                                                </td>
                                                <td colspan="2">
                                                    <textarea class="form-control" id="comments" name="agents[{{$agentIndex}}][comments]" rows="1" cols="20" placeholder="Any Instructions">{{$tableItems['comments']}}</textarea>
                                                </td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                        {{-- <tfoot>
                            <tr>
                                <td colspan="2" style="text-align:right; background-color: #f8d7da;">
                                    <a class="btn btn-danger" href="{{ url('/admin/order/view/delete/' . encrypt($order->id) . '/' . encrypt($tableItems['agentAssignId'])) }}" onclick="return confirm('Do you really want to Remove this Agent Permanently?');" type="button" >Remove</a>
                                </td>
                            </tr>
                        </tfoot> --}}
                    </table>
                    @php $agentIndex++; @endphp
                    @endforeach
                </div>

                <!-- Footer Add Button -->
                <table class="table">
                    <tbody>
                        <tr>
                            <td colspan="2" style="text-align:right;">
                                <button class="btn btn-primary addAgent" type="button">Add New Agent</button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div id="totalValue" style="margin-bottom:10%; display:none;">
                    <b>TOTAL CHARGES : </b>
                    <input class="form-control" name="total" id="total" />
                </div>

                <input type="hidden" name="OrderID" value="{{ $order->unique_order_id }}" />
                <input type="hidden" name="OrderOriginalID" value="{{ $order->id }}" />

                <div id="button_assign">
                    <button class="btn btn-success" type="submit" id="btn_assign" >UPDATE ASSIGN ORDER</button>
                </div>
            </form>
        </div>
    </section>
</main>


<style type="text/css">
    .table-container {height: 450px; /*    overflow-y: scroll;*/ }
    .table-container table {width: 100%; border-collapse: collapse; }
    .table-container thead, .table-container tfoot {background-color: #f2f2f2; /* Optional: background color to differentiate the head and foot */ position: sticky; top: 0; z-index: 1; }
    .table-container tfoot {bottom: 0; top: auto; }
    .table-container tbody {display: block; /*height: 100%;*/ height: 250px; overflow-y: scroll; width: 100%; }
    .table-container tbody tr {display: table; width: 100%; table-layout: fixed; }
    .table-container thead tr, .table-container tfoot tr {display: table; width: 100%; table-layout: fixed; }
    .processTable{background-color: #efefef !important; padding: 10px 5px; text-align: center; }
    .btn{padding:0.35rem 0.5rem 0.35rem 0.5rem}

    .select2-selection__choice {background: #8f8f8fff !important; }
    .select2-selection.select2-selection--single{height: 38px !important;}
    .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:34px !important;}
    .select2-container--default .select2-selection--single .select2-selection__arrow {height: 33px !important;}
    .assigntbl{border: 1px solid #cfdefb}
    .assigntbl th, tr, td{border-style: dotted; border-color: #c7c4c4;}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script>
    $(document).ready(function(){
        // Initialize Select2 for existing elements
        $('.agent-select').select2({
            placeholder: "Select Agent",
            allowClear: true,
            width: '100%'
        });
        
        $('.product-select').select2({
            placeholder: "Select Product",
            allowClear: true,
            width: '100%'
        });

        $('.copyImagePath').click(function () {
            let id = $(this).attr("ds-value"); 
            let imagePaths = [];

            $('.personalized_image_' + id).each(function () {
                imagePaths.push($(this).val());
            });

            const textToCopy = imagePaths.join('\n');
            console.log(id);

            navigator.clipboard.writeText(textToCopy)
                .then(() => {
                    alert('Image paths copied to clipboard!');
                })
                .catch(err => {
                    console.error('Failed to copy text: ', err);
                    alert('Failed to copy image paths. Please try again.');
                });
        });

        $('.copyTextPath').click(function () {
            let id = $(this).attr("data-value");
            let ImgText = $('#ImgText_' + id).val(); 

            navigator.clipboard.writeText(ImgText)
                .then(() => {
                    alert('Image Text copied to clipboard!');
                })
                .catch(err => {
                    console.error('Failed to copy text: ', err);
                    alert('Failed to copy image text. Please try again.');
                });
        });

        $(document).on('click', '.addAgent', function(e) {
            e.preventDefault();

            let isFormAppended = 0; // Flag to track if form has been appended    

            // Collect all selected values
            selectedValues = [];
            let allAgentsSelected = true; // Flag to check if all agents are selected

            $('.getAgentId').each(function () {
                const value = $(this).val();
                selectedValues.push(value);
                if (!value) {
                    allAgentsSelected = false;
                }
            });

            if (!allAgentsSelected) {
                alert('Please select an agent before adding a new one.');
                return;
            }

            var agentIndex = $('#appendedProduct .AgentAssigndProduct').length;

            $.ajax({
                url: "{{ url('/admin/order/getAgentId') }}", 
                type: 'GET',
                data: { 
                    agentsArray: selectedValues,
                    agentIndex:agentIndex,
                },
                success: function(response) {
                    var agentIndex = response.agentIndex;
                    var allAgents = response.agents; 

                    $.each(allAgents, function(index, agent) {  
                        console.log(agent.id);
                    });

                    if (isFormAppended==allAgents.length) {
                        alert('All agents are selected.');
                        return;
                    }

                    var agentHTML = 
                        `<table class="table assigntbl AgentAssigndProduct tab${agentIndex}" style="border: 1px solid #cfdefb;">

                            
                            <tbody>

                                <tr>
                                    <td width="30%">
                                        <select name="agents[${agentIndex}][agent_id]" class="form-control agent-select getAgentId" data-id="${agentIndex}" required>   
                                            <option value="">Select Agent</option>`;
                                    allAgents.forEach(function(agent) {
                                        agentHTML += `<option value="${agent.id}">${agent.name}</option>`;
                                    });

                        agentHTML += `       
                                        </select>
                                    </td>
                                    <td width="70%" style="text-align:right;">`;

                            if(agentIndex == 0){
                                agentHTML += `<button data-id="${agentIndex}" data-product-index="0" class="btn btn-info resetbtn" style="color: white;"><i class="bx bx-refresh" title="Reset Agent"></i></button>`;
                            }

                            if(agentIndex > 0){
                                agentHTML += `<button data-id="${agentIndex}" data-product-index="0" class="btn btn-info resetbtn" style="color: white;"><i class="bx bx-refresh" title="Reset Agent"></i></button>
                                            <button class="btn btn-danger removeAgent" type="button">Remove</button>
                                        </td>`;
                            }

                        agentHTML += `
                                    </td>
                                <tr>

                                <tr>
                                    
                                    <td colspan="2">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Price</th>
                                                    <th>QTY</th>
                                                    <th class="imageLinkHeader" style="display:none;">Image Link</th>
                                                    <th class="textHeader" style="display:none;">Text</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="AppendPrice">
                                                <tr class="default-row">
                                                    <td>
                                                        <select name="agents[${agentIndex}][0][products][]" class="form-control product-select" data-agent-index="${agentIndex}" data-product-index="0" required>
                                                            <option value="">Please Select Agent First</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                            <input class="form-control product_price" name="agents[${agentIndex}][0][product_prices][]" required />
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <input class="form-control product_qty" name="agents[${agentIndex}][0][product_qty][]" value="1" required/>
                                                    </td>
                                                    <td>
                                                        <textarea class="form-control imgLink" id="agents[${agentIndex}][0][imgLink][]" name="agents[${agentIndex}][0][imgLink][]" rows="2" cols="20" style="display:none;"></textarea>
                                                    </td>
                                                    <td>
                                                        <textarea class="form-control text" id="agents[${agentIndex}][0][text][]" name="agents[${agentIndex}][0][text][]" rows="2" cols="20" style="display:none;"></textarea>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-success btn_addProduct" data-agent-index="${agentIndex}">(+)</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    
                                    <td colspan="2">
                                        <table class="table TotalProductPrice">
                                            <thead>
                                                <tr>
                                                    <th>Delivery Type</th>
                                                    <th>Delivery Charge</th>
                                                    <th>Total Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <select name="agents[${agentIndex}][delivery_type]" class="form-control deliveryType" data-agent-index="${agentIndex}" required>
                                                            <option value="" selected>Select Delivery Type</option>
                                                            <option value="s_delivery">STANDARD</option>
                                                            <option value="e_delivery">FIXED TIME</option>
                                                            <option value="m_delivery">MIDNIGHT</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                            <input class="form-control delivery_type_price" name="agents[${agentIndex}][delivery_type_price]" readonly/>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                            <input class="form-control totalprice" name="agents[${agentIndex}][total_price]" readonly/>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    
                                    <td colspan="2">
                                        <table class="table TotalProductPrice">
                                            <thead>
                                                <tr>
                                                    <th>Delivery Date</th>
                                                    <th>Delivery Time</th>
                                                    <th>Any Instructions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="date" class="form-control totalprice" name="agents[${agentIndex}][date]" required/>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control totalprice" name="agents[${agentIndex}][time]" required/>
                                                    </td>
                                                    <td>
                                                        <textarea class="form-control" id="comments" name="agents[${agentIndex}][comments]" rows="1" cols="20" placeholder="Any Instructions"></textarea>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>`;

                    
                    agentHTML += `</table>`;

                    $('#appendedProduct').append(agentHTML);
                    $('#btn_assign').css('display', 'block');

                    // Initialize Select2 for newly added elements
                    $('.agent-select').select2({
                        placeholder: "Select Agent",
                        allowClear: true,
                        width: '100%'
                    });
                    
                    $('.product-select').select2({
                        placeholder: "Select Product",
                        allowClear: true,
                        width: '100%'
                    });

                    isFormAppended++;
                },
                error: function(error) {
                    console.log("Error fetching agents:", error);
                }
            });
        });

        $(document).on('change', '.agent-select', function() {
            $(this).prop('disabled', true);
            var agent_id = $(this).val();
            var agentIndex = $(this).data('id');
            
            var $selectProduct = $(`select[name="agents[${agentIndex}][0][products][]"]`);
            $selectProduct.html('<option value="">Loading...</option>').select2();

            if (agent_id) {
                $.ajax({
                    url: "{{ url('/admin/order/ProductByAgent') }}", 
                    type: 'GET',
                    data: { agent_id: agent_id },
                    success: function(response) {
                        var options = '<option value="">Select Product</option>';
                        response.forEach(function(product) {
                            options += `<option value="${product.id}">${product.fnid}</option>`;
                        });
                        $selectProduct.html(options).select2({
                            placeholder: "Select Product",
                            allowClear: true,
                            width: '100%'
                        });
                    },
                    error: function(error) {
                        console.log("Error fetching products:", error);
                    }
                });
            } else {
                $selectProduct.html('<option value="">Select Agent First</option>').select2();
            }
        });

        $('form').on('submit', function(e) {
            $('.agent-select').prop('disabled', false);
        });

        $(document).on('change', '.product-select', function() {
            var agentIndex = $(this).data('agent-index'); 
            var productIndex = $(this).data('product-index'); 
            var product_id = $(this).val(); 
            console.log(agentIndex);
            console.log(productIndex);
            var $totalPrice = $(`input[name="agents[${agentIndex}][${productIndex}][product_prices][]"]`);

            if (product_id) {
                $.ajax({
                    url: "{{ url('/admin/order/GetPriceByProduct') }}",  
                    type: 'GET',
                    data: { 
                        product_id: product_id,
                        agentIndex:agentIndex,
                        productIndex:productIndex,
                     },
                    success: function(response) {
                        console.log(response);
                        $totalPrice.val(response.price.price);

                        if (response.price.is_personalized === 'Y') {
                            $(`textarea[name="agents[${response.agentIndex}][${response.productIndex}][imgLink][]"]`).css('display', 'block');
                            $(`textarea[name="agents[${response.agentIndex}][${response.productIndex}][text][]"]`).css('display', 'block');
                            $('.imageLinkHeader').css('display', 'table-cell');
                            $('.textHeader').css('display', 'table-cell');
                        } else {
                            $(`textarea[name="agents[${response.agentIndex}][${response.productIndex}][imgLink][]"]`).css('display', 'none');
                            $(`textarea[name="agents[${response.agentIndex}][${response.productIndex}][text][]"]`).css('display', 'none');
                        }
                        $(`select[name="agents[${agentIndex}][delivery_type]"]`).prop('selectedIndex', 0);
                        $(`input[name="agents[${agentIndex}][delivery_type_price]"]`).val('');
                        $(`input[name="agents[${agentIndex}][total_price]"]`).val('');
                    },
                    error: function(error) {
                        console.log("Error fetching price:", error);
                    }
                });
            }
        });

        $(document).on('click', '.btn_addProduct', function(e) {
            e.preventDefault();

            var $thisButton = $(this); 
            var agentIndex = $thisButton.data('agent-index'); 
            var productIndex = $thisButton.closest('.AppendPrice').find('tr').length;
            var agent_id = $(`select[name="agents[${agentIndex}][agent_id]"]`).val();

            if (agent_id) {
                $.ajax({
                    url: "{{ url('/admin/order/ProductByAgent') }}", 
                    type: 'GET',
                    data: { agent_id: agent_id },
                    success: function(response) {
                        var productRow = 
                            `<tr>
                                <td>
                                    <select name="agents[${agentIndex}][${productIndex}][products][]" class="form-control product-select" data-agent-index="${agentIndex}" data-product-index="${productIndex}">
                                        <option value="">Select Product</option>`;
                        
                        response.forEach(function(product) {
                            productRow += `<option value="${product.id}">${product.fnid}</option>`;
                        });

                        productRow += 
                                    `</select>
                                </td>
                                <td>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="basic-addon1">Rs.</span>
                                        <input class="form-control" name="agents[${agentIndex}][${productIndex}][product_prices][]" />
                                    </div>
                                </td>
                                <td>
                                    <input class="form-control product_qty" name="agents[${agentIndex}][${productIndex}][product_qty][]" value="1"/>
                                </td>
                                <td>
                                    <textarea class="form-control imgLink" id="agents[${agentIndex}][${productIndex}][imgLink][]" name="agents[${agentIndex}][${productIndex}][imgLink][]" rows="2" cols="20" style="display:none;"></textarea>
                                </td>
                                <td>
                                    <textarea class="form-control text" id="agents[${agentIndex}][${productIndex}][text][]" name="agents[${agentIndex}][${productIndex}][text][]" rows="2" cols="20" style="display:none;"></textarea>
                                </td>
                                <td>
                                    <button class="btn btn-danger btn_removeProduct">(-)</button>
                                </td>
                            </tr>`;

                        $thisButton.closest('.AppendPrice').append(productRow); 
                        
                        // Initialize Select2 for the new product select
                        $(`select[name="agents[${agentIndex}][${productIndex}][products][]"]`).select2({
                            placeholder: "Select Product",
                            allowClear: true,
                            width: '100%'
                        });
                    },
                    error: function(error) {
                        console.log("Error fetching products:", error);
                    }
                });
            } else {
                alert("Please select an agent first.");
            }
        });

        $(document).on('click', '.btn_removeProduct', function(e) {
            e.preventDefault();
            $(this).closest('tr').remove(); 
        });

        document.addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('removeAgent')) {
                const agentTable = e.target.closest('.AgentAssigndProduct');
                
                if (agentTable && !agentTable.classList.contains('tab0')) {
                    agentTable.remove();
                } else {
                    alert("You cannot remove the first agent table.");
                }
            }
        });

        $(document).on('change', '.deliveryType', function() {
            var $this = $(this);
            var agentIndex = $this.data('agent-index'); 
            var Dtype = $this.val(); 
            var agent_id = $(`select[name="agents[${agentIndex}][agent_id]"]`).val();
            var $totalPrice = $(`input[name="agents[${agentIndex}][delivery_type_price]"]`); 
            var $total = $(`input[name="agents[${agentIndex}][total_price]"]`);  

            if (!agent_id) {
                alert('Please select an agent first.');
                return;
            }

            var productPrices = [];
            var productqty = [];
            $(`input[name^="agents[${agentIndex}]["][name$="product_prices][]"]`).each(function() {
                productPrices.push(parseFloat($(this).val()) || 0); 
            });

            $(`input[name^="agents[${agentIndex}]["][name$="product_qty][]"]`).each(function() {
                productqty.push(parseFloat($(this).val()) || 0); 
            });

            var deliveryTypePrice = parseFloat($totalPrice.val()) || 0;

            $.ajax({
                url: "{{ url('/admin/order/GetDeliveryType') }}",
                type: "GET",
                data: {
                    Dtype: Dtype,
                    agent_id: agent_id,
                    productPrices: productPrices,
                    productqty:productqty,
                },
                success: function(response) {
                    var totalProductPrice = productPrices.reduce((sum, price) => sum + price, 0);
                    var deliveryCharge = 0;
                    
                    if (Dtype === 's_delivery') {
                        deliveryCharge = response.agent_delivery_charge.s_delivery;
                    } else if (Dtype === 'm_delivery') {
                        deliveryCharge = response.agent_delivery_charge.m_delivery;
                    }

                    $totalPrice.val(deliveryCharge);
                    var total = response.total + deliveryCharge;
                    $total.val(total);
                },
                error: function(error) {
                    console.log("Error fetching delivery type:", error);
                }
            });
        });

                $(document).off('click', '.resetbtn').on('click', '.resetbtn', function () {
            var agentIndex = $(this).data('id');
            
            var $agentBlock = $('.tab' + agentIndex); // Main wrapper for this agent
            // console.log($agentBlock);
            // ✅ Reset the agent select dropdown
            var $agentSelect = $agentBlock.find('.agent-select');
            $agentSelect.val('').trigger('change');           // Clear selection
            $agentSelect.prop('disabled', false);             // Make sure it's enabled
            $agentSelect.removeClass('select2-hidden-accessible'); // Clear any residual styling if needed (optional)

            // ✅ Reset the product tbody section
            var $appendPriceTbody = $agentBlock.find('.AppendPrice');
            $appendPriceTbody.html(`
                <tr class="default-row">
                    <td>
                        <select name="agents[${agentIndex}][0][products][]" class="form-control product-select" data-agent-index="${agentIndex}" data-product-index="0" required>
                            <option value="">Please Select Agent First</option>
                        </select>
                    </td>
                    <td>
                        <input class="form-control product_price" name="agents[${agentIndex}][0][product_prices][]" required />
                    </td>
                    <td>
                        <input class="form-control product_qty" name="agents[${agentIndex}][0][product_qty][]" value="1" required/>
                    </td>
                    <td>
                        <textarea class="form-control imgLink" id="agents[${agentIndex}][0][imgLink][]" name="agents[${agentIndex}][0][imgLink][]" rows="2" cols="20" style="display:none;"></textarea>
                    </td>
                    <td>
                        <textarea class="form-control text" id="agents[${agentIndex}][0][text][]" name="agents[${agentIndex}][0][text][]" rows="2" cols="20" style="display:none;"></textarea>
                    </td>
                    <td>
                        <button class="btn btn-success btn_addProduct" data-agent-index="${agentIndex}">(+)</button>
                    </td>
                </tr>
            `);

            // ✅ Reinitialize Select2 for agent and product dropdowns
            $agentSelect.select2({
                placeholder: "Select Agent",
                allowClear: true,
                width: '100%'
            });

            $agentBlock.find('.product-select').select2({
                placeholder: "Select Product",
                allowClear: true,
                width: '100%'
            });
        });
    });    
</script>


<script>
    $(document).ready(function(){

        $(document).on('submit','#reEnable',function(){
            // alert('hello');
            $('.agent-select').prop('disabled', false); // Re-enable fields
        });

        $('#reassignAggent').change(function(){
            var OrderId = $('#OrderId').val();
            var reassignAggent = $('#reassignAggent').val();
            $.ajax({
                url:"{{url('/admin/order/getReAssignPrice')}}",
                type:"GET",
                data:{
                    OrderId:OrderId,
                    reassignAggent:reassignAggent,
                },
                success:function(response){
                    // console.log(response);
                    $('#re_price').val(response);
                },
                error:function(error){
                    console.log(error);
                },
            }); 
        });
        $('#btnReAssign').click(function(){
            var OrderId = $('#OrderId').val();
            var reassignAggent = $('#reassignAggent').val();
            var re_price = $('#re_price').val();

            $.ajax({
                url:"{{url('/admin/order/Reassign')}}",
                type:"GET",
                data:{
                    OrderId:OrderId,
                    reassignAggent:reassignAggent,
                    re_price:re_price,
                },
                success:function(response){
                    // console.log(response);
                    location.reload();
                },
                error:function(error){
                    console.log(error);
                },
            }); 
        });

        $('#btn_mail_send').click(function(){
            var mail_status = $('#mail_status').val();
            var OrderID = @json($order->id);
            $.ajax({
                url:"{{url('/admin/order/mailStatus')}}",
                type:'GET',
                data:{
                    mail_status:mail_status,
                    OrderID:OrderID,
                },
                success:function(response){
                    // console.log(response);
                    location.reload();
                },
                error:function(error){  
                    console.log(error);
                },
            });
        });
        $('.mail_status').change(function(){
            var mail_status = $('#mail_status').val();
            console.log(mail_status);
            if(mail_status == 'S'){
                $('#AssignIds').css('display', 'block');
            }else{
                $('#AssignIds').css('display', 'none');
            }
        });

        // $('form').on('submit', function(e) {
        //     $('.agent-select').prop('disabled', false); // Re-enable fields
        // });
        

    });
</script>

<script type="text/javascript">

    $(document).on('click', '.uploaded-txt-show-btn', function () {
        //alert("ff");
        var txtlinkid = $(this).data("txtlinkid");
        $('#ptxt' + txtlinkid).modal('show');
    });

    $(document).on('click', '.uploaded-img-show-btn', function () {
        //alert("ff");
        var imglinkid = $(this).data("imglinkid");
        $('#pimg' + imglinkid).modal('show');
    });

    $(function () {
        $(".btn-default, .close").click(function () {
            $(".uploaded-img-container").modal("hide");
        });
    });

    function downloadZip(zipId, orderDtlId, productId) {
        window.location.href = '/admin/orders/download-personalized-images/' + zipId + '/' + orderDtlId + '/' + productId;
    }

    $(document).on('click', '.download-all', function () {
        var targetId = $(this).data('targetid'); // e.g., pimg1, pimg2
        $('#' + targetId + ' .modal-body img').each(function () {
            var imageUrl = $(this).attr('src');
            var link = document.createElement('a');
            link.href = imageUrl;
            link.download = imageUrl.split('/').pop(); // gets the filename
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    });

    {{-- $(document).on('click', '.download-images-zip', async function () {
        const containerId = $(this).data('target');
        const productId = $(this).data('productid');
        const orderId = $(this).data('orderid');

        const zip = new JSZip();
        const folder = zip.folder("images");

        const images = $('#' + containerId + ' img');
        const fetchImageAsBlob = async (url) => {
            const res = await fetch(url);
            return await res.blob();
        };

        let count = 0;

        for (const img of images) {
            const src = $(img).attr('src');
            if (!src) continue;

            try {
                const blob = await fetchImageAsBlob(src);
                const filename = `image_${++count}${src.substr(src.lastIndexOf('.'))}`;
                folder.file(filename, blob);
            } catch (e) {
                console.error('Failed to fetch image:', src, e);
            }
        }

        zip.generateAsync({ type: "blob" }).then(function (content) {
            saveAs(content, `${orderId}_${productId}.zip`);
        });
    }); --}}

    {{-- $(document).on('click', '.download-images-zip', async function () {
        const containerId = $(this).data('target');
        const productId = $(this).data('productid');

        const zip = new JSZip();
        const folder = zip.folder("images");

        const images = $('#' + containerId + ' img');
        let count = 0;

        for (const img of images) {
            const src = $(img).attr('src');
            if (!src) {
                console.warn('Image without src found');
                continue;
            }

            try {
                console.log(`Fetching image: ${src}`);
                const res = await fetch(src, { mode: 'cors' });
                if (!res.ok) {
                    console.error(`Failed to fetch image: ${src}`, res.status);
                    continue;
                }

                const blob = await res.blob();
                const ext = src.split('.').pop().split(/\#|\?/)[0];
                const filename = `image_${++count}.${ext}`;
                folder.file(filename, blob);
            } catch (e) {
                console.error('Error fetching image:', src, e);
            }
        }

        if (count === 0) {
            alert("No images could be added. Check CORS or image paths.");
            return;
        }

        zip.generateAsync({ type: "blob" }).then(function (content) {
            saveAs(content, `product_${productId}.zip`);
        });
    }); --}}
 
</script>

@endsection

@section('script')



@endsection