@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 Detail</h1>
        {{-- <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/admin/order') }}">Home</a></li>
                <li class="breadcrumb-item active">Order</li>
            </ol>
        </nav> --}}
    </div><!-- End Page Title -->

    <section class="section contact">

        No record found.

        @if($disable >= 1)

        @else
        <div class="product_content">
            <h3>Assign Agent</h3>
            <form action="{{url('/admin/order/view/')}}/{{$order->id}}" method="post">
                @csrf
                
                <!-- Appended Products -->
                <div id="appendedProduct"></div>
                
                <!-- Form Footer -->
                <table class="table">
                    <tbody>
                        <tr>
                            <td colspan="2" style="text-align:right; background-color: #cfe2ff;">
                                <button class="btn btn-primary addAgent" type="button">Add 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 class="form-control" type="hidden" name="OrderID" value="{{$order->unique_order_id}}"/>
                <input class="form-control" type="hidden" name="OrderOriginalID" value="{{$order->id}}"/>

                <div id="button_assign"><button class="btn btn-success" type="submit" id="btn_assign"  style="display:none;">ASSIGN</button></div>
            </form>

        @endif
            
            @if($disable == 0)
            @else

                <div class="page-breadcrumb">
                    <div class="row">
                        <div class="col-12 d-flex no-block align-items-center justify-content-between px-4 mb-2">
                            
                                <h3 style="margin-top: 1%; margin-bottom: 1%;">Processed Order Detail
                                    <a href="{{ url('/admin/order/view/edit/' . encrypt($order->id)) }}"><i class="bx bxs-calendar-edit fawsm" style="font-size:25px"></i></a>
                                </h3>

                                <div class="ml-auto text-right">
                                    @php
                                        $orderPlacedInfo = App\Http\Helper1::get_orderPlacedInfo($order->id);
                                    @endphp
                                    <h6><b>Placed By:</b> {{ $orderPlacedInfo->name }}</h6>
                                </div>
                            
                        </div>
                    </div>
                </div>

                {{-- <h2 style="margin-top: 1%; margin-bottom: 1%;">Processed Order Detail
                    <a href="{{ url('/admin/order/view/edit/' . encrypt($order->id)) }}"><i class="bx bxs-calendar-edit fawsm" style="font-size:25px"></i></a>
                </h2> --}}
                {{-- <div class="text-end"> 
                    <a href="{{ url('/admin/order/view/edit/' . encrypt($order->id)) }}" class="btn btn-primary">
                        Edit
                    </a>
                </div> --}}


                @php
                    $mailDisable = 0;
                    $groupedData = [];
                    //dd($assinged);
                    foreach ($assinged as $assignedItem) {
                        foreach ($assigned_agent_product_map as $assigned_agent_product_maps) {
                            if ($assignedItem->id == $assigned_agent_product_maps->agent_assinged_id) {
                                $agent = $agents->firstWhere('id', $assignedItem->agent_id);
                                $productItem = $product->firstWhere('id', $assigned_agent_product_maps->product_id);
                                $productMapedItem = $agent_product_list->firstWhere('id', $assigned_agent_product_maps->product_id);

                                $productQty = $assigned_agent_product_map
                                                ->where('product_id', $assigned_agent_product_maps->product_id)
                                                ->where('agent_assinged_id', $assigned_agent_product_maps->agent_assinged_id)
                                                ->first();

                                if ($productItem && $agent) {
                                    // ✅ Use agent_order_id as the grouping key
                                    $orderKey = $assignedItem->agent_order_id;

                                    if (!isset($groupedData[$orderKey])) {
                                        $groupedData[$orderKey] = [
                                            'products' => [],
                                            'mapped_details' => [],
                                            'qty' => [],
                                            'OrderID' => $assignedItem->id,
                                            'agent_order_id' => $assignedItem->agent_order_id,
                                            'delivery_date' => $assignedItem->delivery_date,
                                            'agent_id' => $assignedItem->agent_id,
                                            'totalPrice' => $assignedItem->totalPrice,
                                            'status' => $assignedItem->status,
                                            'agent_name' => $agent->name,
                                            'extra' => $assignedItem->extra,
                                            'Deliver_charge' => $assignedItem->Deliver_charge,
                                            'reason' => $assignedItem->reason,
                                            'track_no' => $assignedItem->track_no,
                                            'isConfirmCl' => $assignedItem->isConfirmCl
                                        ];
                                    }

                                    $groupedData[$orderKey]['products'][] = $productItem->product_name;
                                    $groupedData[$orderKey]['mapped_details'][] = $productMapedItem->fnid;
                                    $groupedData[$orderKey]['qty'][] = $productQty->qty;
                                }
                            }
                        }
                    }

                 

                @endphp
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="processTable">Sl No</th>
                                <th class="processTable">Order Id</th>
                                <th class="processTable">Product Name & Qty</th>
                                {{--<th class="processTable">Qty</th>--}}
                                <th class="processTable">Assigned Agent</th>
                                <th class="processTable">Price</th>
                                <th class="processTable">Delivery Charge</th>
                                <th class="processTable">Extra</th>
                                <th class="processTable">Reason</th>
                                <th class="processTable">Track No</th>
                                <th class="processTable">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = 1; @endphp
                            @php 
                                $Delivery_Price = 0;    
                                $Extra = 0;
                                $Delivery = 0; 
                                $total = 0;
                            @endphp
                            @foreach($groupedData as $data)
                                <tr>
                                    <td style="text-align:center;">{{ $i++ }}</td>
                                    <td style="text-align:center;">
                                        <a href="{{url('/admin/order/assign-order-view')}}/{{encrypt($data['agent_order_id'])}}/{{encrypt($data['agent_id'])}}" class="fawsm" target="_blank">
                                            <strong>{{ $data['agent_order_id'] }}</strong>
                                        </a>
                                        <br>
                                        <span class="badge rounded-pill bg-light text-dark">
                                            {{ date('jS M, Y' , strtotime($data['delivery_date'])) }}
                                        </span>
                                        
                                    </td>
                                    {{--<td style="text-align:center;">
                                        {!! implode('<br>', $data['mapped_details']) !!} 
                                    </td>
                                    <td style="text-align:center;">
                                        {!! implode('<br>', $data['qty']) !!}
                                    </td>--}}
                                    <td style="text-align:center;">
                                        @foreach($data['mapped_details'] as $index => $detail)
                                            {{ $detail }} [Qty:{{ $data['qty'][$index] ?? 0 }}]
                                            @if (!$loop->last)<br> @endif
                                        @endforeach
                                    </td>
                                    <td style="text-align:center;">{{ ucwords($data['agent_name']) }}</td>
                                    <td style="text-align:center;">{{ $data['totalPrice'] }}</td>
                                    <td style="text-align:center;">{{ $data['Deliver_charge'] }}</td>
                                    <td style="text-align:center;">{{ $data['extra'] }}</td>
                                    <td style="text-align:center;">{{ $data['reason'] }}</td>
                                    <td style="text-align:center;">{{ $data['track_no'] }}</td>
                                    <td style="text-align:center;">
                                        @if($data['status'] == 'P')
                                            <h6><span class="badge bg-danger">PENDING</span></h6>
                                        @elseif($data['status'] == 'PC')
                                            @php $mailDisable++; @endphp
                                            <h6><span class="badge bg-info">PROGRESS</span></h6>
                                        @elseif($data['status'] == 'CL')
                                            <h6><span class="badge bg-dark">CANCEL</span></h6>
                                        @elseif($data['status'] == 'H')
                                            <h6><span class="badge bg-warning">HOLD</span></h6>
                                        @elseif($data['status'] == 'S')
                                            @php $mailDisable++; @endphp
                                            <h6><span class="badge bg-primary">SHIPPED</span></h6>
                                        @elseif($data['status'] == 'D')
                                            @php $mailDisable++; @endphp
                                            <h6><span class="badge bg-success">DELIVERED</span></h6>
                                        @endif
                                    </td>
                                    <td>
                                        @if($data['isConfirmCl'] == 0 && $data['status'] == "CL")
                                            <button class="btn btn-primary btn_cancel" id="btn_cancel" ds-value="{{ $data['OrderID'] }}">Add Agent</button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @foreach($groupedData as $amount)
                        @if($amount['isConfirmCl'] != 1 && $amount['status'] != "CL")
                            <!-- {{$amount['totalPrice']}} = {{$amount['extra']}} = {{$amount['Deliver_charge']}} -->
                             <!-- <br> -->
                            @php    
                                $total +=$amount['totalPrice'] + $amount['extra'] + $amount['Deliver_charge'];
                            @endphp
                         @endif
                    @endforeach

                    <div id="ReassignProduct"></div>
                    @if($order->order_delivery_status != 'CL')
                        @if($order->order_delivery_status != 'D')
                            @if($disable == $mailDisable)
                                <h3>Customer Email</h3>
                                    @php 
                                        $count = 0; 
                                        $buttonEnable = count($agentasGroupBy) + 1;
                                        $buttonCount = 1; 
                                    @endphp

                                    @foreach($agentasGroupBy as $assign)
                                        @if($assign->status != 'P')
                                            @php 
                                                $count++; 
                                                $buttonCount++; 
                                            @endphp                      
                                        @endif
                                    @endforeach
                               
                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                @if($count > 0)
                                                    <td>
                                                        <select name="mail_status" id="mail_status" class="form-control mail_status">
                                                        <option value="">Select Mail Process</option>
                                                            @if($order->order_delivery_status == 'P')
                                                                <option value="PC">Progress</option>
                                                                <option value="S">Shipped</option>
                                                                <option value="D">Delivered</option>
                                                                <option value="CL">Cancel</option>
                                                            @elseif($order->order_delivery_status == 'PC')
                                                                <option value="S">Shipped</option>
                                                                <option value="D">Delivered</option>
                                                                <option value="CL">Cancel</option>
                                                            @elseif($order->order_delivery_status == 'S')
                                                                <option value="D">Delivered</option>
                                                                <option value="CL">Cancel</option>
                                                            @endif
                                                             

                                                        </select>
                                                    </td>
                                                @endif
                                                <td>
                                          
                                                </td>
                                                @if($buttonCount == $buttonEnable)
                                                    <td>
                                                    <button class="btn btn-primary" id="btn_mail_send" @if($order->order_delivery_status == 'D') Style="display:none;" @else @endif>SEND</button>
                                                    </td>
                                                @endif
                                            </tr>
                                        </tbody>
                                    </table>
                                
                            @endif
                        @endif   
                    @endif         
                    @php $grandTotal = 0; @endphp
                    @if($order->order_delivery_status == 'D')
                        @php 
                            $grandTotal = $Delivery_Price+$Extra+$Delivery+$total;
                        @endphp
                        <p><b>Paid To Agent :  {{$total}}</b></p>
                    @endif
                    @if($order->order_delivery_status == 'PC')
                        <table class="table" style="display:none;" id="AssignIds">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($agentasGroupBy as $assignItems)
                                    @if($assignItems->status == "CL")
                                    @else
                                    <tr>
                                        <td>
                                            <input class="form-control" name="OrderId[]" value="{{$assignItems->agent_order_id}}"/>
                                        </td>
                                        <td>
                                            <input class="form-control" name="track_no[]" value="{{$assignItems->track_no}}" />
                                        </td>
                                        <td>
                                            <input class="form-control" name="tracking_link[]" value="{{$assignItems->tracking_link}}" />
                                        </td>
                                    </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    @endif              
            @endif
        </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; }

    .edit_delivery_address_section{display: none;}
    .edit_message_section{display: none;}
    .card{margin-bottom: 15px!important;}
    .msgerror{font-size:12px; color:red}
    .editinputsec{width:100%}
    .fawsm {color: #3e5569!important; }

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

</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(() => {
                    $('.ri-file-copy-2-fill').empty();
                    $('.ri-file-copy-2-fill').append(`Copied`);
                    // 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 AgentAssigndProduct tab${agentIndex}">

                            <thead>
                                <tr>
                                    <th>Agent</th>
                                    <th>Details </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <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>
                                        <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>
                                                        <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>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <table class="table TotalProductPrice">
                                            <thead>
                                                <tr>
                                                    <th>Delivery Type</th>
                                                    <th>Price</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>
                                                        <input class="form-control delivery_type_price" name="agents[${agentIndex}][delivery_type_price]" readonly/>
                                                    </td>
                                                    <td>
                                                        <input class="form-control totalprice" name="agents[${agentIndex}][total_price]" readonly/>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <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 colspan="2">
                                                        <textarea class="form-control" id="comments" name="agents[${agentIndex}][comments]" rows="1" cols="20" placeholder="Any Instructions"></textarea>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>`;

                    if(agentIndex == 0){
                        agentHTML += `<td colspan="2" style="text-align:right;" id="btn_to_reset_remove">
                                    <button data-id="${agentIndex}" data-product-index="0" class="btn btn-info resetbtn" style="color: white;">Reset</button>
                                </td>`;
                    }
                     if(agentIndex > 0){
                        agentHTML += `<td colspan="2" style="text-align:right; id="btn_to_reset_remove"">
                                    <button data-id="${agentIndex}" data-product-index="0" class="btn btn-info resetbtn" style="color: white;">Reset</button>
                                    <button class="btn btn-danger removeAgent" type="button">Remove</button>
                                </td>`;
                    }
                    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).off('click', '.resetbtn').on('click', '.resetbtn', function () {
            var agentIndex = $(this).data('id');

            var $agentBlock = $('.tab' + agentIndex); // Main wrapper for this agent

            // ✅ 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%'
            });
        });


        $(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(); 
            
            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>
                                    <input class="form-control" name="agents[${agentIndex}][${productIndex}][product_prices][]" />
                                </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 resetbtn = e.target.closest('.resetbtn');
                const agentTable = e.target.closest('.AgentAssigndProduct');
                
                if (agentTable && !agentTable.classList.contains('tab0')) {
                    agentTable.remove();
                    // resetbtn.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);
                }
            });
        });
    });    
</script>


<script>
    $(document).ready(function(){
    
        $('.btn_cancel').click(function(){
            var orderId = $(this).attr('ds-value');
            var reassignAggent = $('#reassignAggent').val();
            console.log(orderId);
            console.log(reassignAggent);
            $('.reassign').css('display', 'block');
            $.ajax({
                url:"{{url('/admin/order/getOrderID')}}",
                type:'get',
                data:{
                    orderId:orderId,
                    reassignAggent:reassignAggent,
                },
                success:function(response){
                var agentIndex = $('#ReassignProduct .AgentAssigndProduct').length;
                console.log(agentIndex);

                var agentHTML = `
                <form action="{{url('/admin/order/ReAssignProduct')}}" method="post" id="reEnable">
                @csrf
                     <input class="form-control" type="hidden" name="OrderId" id="OrderId" disabled value=${response.id}>
                    <b>ORDER ID :</b><input class="form-control" type="" name="agent_order_id" id="agent_order_id" value=${response.agent_order_id}>
                    <table class="table AgentAssigndProduct">
                        
                        <thead>
                            <tr>
                                <th>Agent</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="agents[${agentIndex}][agent_id]" class="form-control agent-select" data-id="${agentIndex}" required>
                                        <option value="">Select Agent</option>
                                        @foreach($agentsAfterCancel as $agent)
                                            @foreach($agent as $agents)
                                                <option value="{{$agents->id}}">{{$agents->name}}</option>
                                            @endforeach 
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <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>
                                                    <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="4" cols="50" style="display:none;"></textarea>
                                                </td>
                                                <td>
                                                    <textarea class="form-control text" id="agents[${agentIndex}][0][text][]" name="agents[${agentIndex}][0][text][]" rows="4" cols="50" 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></td>
                                <td>
                                    <table class="table TotalProductPrice">
                                        <thead>
                                            <tr>
                                                <th>Delivery Type</th>
                                                <th>Price</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>
                                                    <input class="form-control delivery_type_price" name="agents[${agentIndex}][delivery_type_price]" required />
                                                </td>
                                                <td>
                                                    <input class="form-control totalprice" name="agents[${agentIndex}][total_price]" required />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <table class="table TotalProductPrice">
                                        <thead>
                                            <tr>
                                                <th>Delivery Date</th>
                                                <th>Delivery Time</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>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <b>Any other requirments</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <textarea class="form-control" id="comments" name="agents[${agentIndex}][comments]" rows="4" cols="50" placeholder="Any Speacial Requirments"></textarea>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                   
                    <div style="text-align:right;"><button class="btn btn-primary .btn_reasiign" type="submit" id="btnReAssign">ASSIGN</button></div>
                    </form>
                `;

                $('#ReassignProduct').append(agentHTML);
                    // $('#OrderId').val(response.id);
                    // $('#agent_order_id').val(response.agent_order_id);
                    // console.log(response);
                },
                error:function(error){
                    console.log(error);
                }
            });
        });
            
        $(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);
            var OrderIdArray = $('[name="OrderId[]"]').map(function () {return $(this).val();}).get();
            var track_no = $('[name="track_no[]"]').map(function () {return $(this).val();}).get();
            var tracking_link = $('[name="tracking_link[]"]').map(function () {return $(this).val();}).get();

            if (OrderIdArray.some(function(val) { return val.trim() !== ''; }) ||track_no.some(function(val) { return val.trim() !== ''; }) ||tracking_link.some(function(val) { return val.trim() !== ''; })) {
                $.ajax({
                    url:"{{url('/admin/order/mailStatus')}}",
                    type:'GET',
                    data:{
                        mail_status:mail_status,
                        OrderID:OrderID,
                        OrderIdArray:OrderIdArray,
                        track_no:track_no,
                        tracking_link:tracking_link,
                    },
                    success:function(response){
                        console.log(response);
                        // location.reload();
                    },
                    error:function(error){  
                        console.log(error);
                    },
                });
            } else {
                $.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);
        });
    });

    //---------Edit Delivery Address Section----------

    $('.del-address-edit-btn').on('click', function(){
        $('.delivery_address_section').hide();
        $('.edit_delivery_address_section').show();
    });

    $('.cancel-del-address-edit-btn').on('click', function(){
        $('.delivery_address_section').show();
        $('.edit_delivery_address_section').hide();
    });

    $('.update-delivery_address').on('click', function(){
        var odr_id = $('#odr_id').val();
        var del_add_access_code = $('#del_add_access_code').val();
        var rec_name = $('#rec_name').val();
        var rec_address = $('#rec_address').val();
        var rec_city = $('#rec_city').val();
        var rec_state = $('#rec_state').val();
        var rec_zipcode = $('#rec_zipcode').val();
        var rec_phone = $('#rec_phone').val();

        if(rec_name == '' || rec_address == '' || rec_city == '' || rec_state == '' || rec_zipcode == '' || rec_phone == '' )
        {
            $('#warning-msg-del-address').html("Fill all fields");
            setTimeout(function(){ $('#warning-msg-del-address').html(""); }, 3000);
            return false;
        }

        if(del_add_access_code == ''){
            $('#warning-msg-del-address').html("Enter your access code");
            setTimeout(function(){ $('#warning-msg-del-address').html(""); }, 3000);
            return false;
        }else if(del_add_access_code != 'rspl'){
            $('#warning-msg-del-address').html("Access code didn't match");
            setTimeout(function(){ $('#warning-msg-del-address').html(""); }, 3000);
            return false;
        }

        $.ajaxSetup({
            headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type : "POST",
            url : "{{route("admin.order.updateDeliveryAddress")}}",
            data : { odr_id : odr_id, rec_name : rec_name, rec_address : rec_address, rec_city : rec_city, rec_state : rec_state, rec_zipcode : rec_zipcode, rec_phone : rec_phone, del_add_access_code : del_add_access_code, site : $('#sitename').val() },
            success : function(response){
            response = JSON.parse(response);
            if(response.status == "success"){
              window.location.reload();
            }else if (response.status == "failed"){
                $('#warning-msg-del-address').html("Access code didn't match");
                setTimeout(function(){ $('#warning-msg-del-address').html(""); }, 3000);
                return false;
            }
            },
            error : function(){

            }
        });
    });

//---------###Edit Delivery Address Section###----------

//---------Edit Message Section----------

    $('.message-edit-btn').on('click', function(){
        $('.message_section').hide();
        $('.edit_message_section').show();
    });

    $('.cancel-message-edit-btn').on('click', function(){
        $('.message_section').show();
        $('.edit_message_section').hide();
    });

    $('.update-message').on('click', function(){
        var odr_id = $('#odr_id').val();
        var message_access_code = $('#message_access_code').val();
        var occ_type = $('#occ_type').val();
        var sender_msg = $('#sender_msg').val();
        var sender_name = $('#sender_name').val();
        var spl_inst = $('#spl_inst').val();

        if(occ_type == '' || sender_msg == '' || sender_name == '')
        {
            $('#warning-msg-del-address').html("Please Fill all fields");
            setTimeout(function(){ $('#warning-msg-message').html(""); }, 3000);
            return false;
        }

        if(message_access_code == ''){
            $('#warning-msg-message').html("Enter your access code");
            setTimeout(function(){ $('#warning-msg-message').html(""); }, 3000);
            return false;
        }else if(message_access_code != 'rspl'){
            $('#warning-msg-message').html("Access code didn't match");
            setTimeout(function(){ $('#warning-msg-message').html(""); }, 3000);
            return false;
        }

        $.ajaxSetup({
            headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type : "POST",
            url : "{{route("admin.order.updateMessages")}}",
            data : { odr_id : odr_id, occ_type : occ_type, sender_msg : sender_msg, sender_name : sender_name, spl_inst : spl_inst, message_access_code : message_access_code, site : $('#sitename').val() },
            success : function(response){
            response = JSON.parse(response);
            if(response.status == "success"){
              window.location.reload();
            }else if (response.status == "failed"){
                $('#warning-msg-message').html("Access code didn't match");
                setTimeout(function(){ $('#warning-msg-message').html(""); }, 3000);
                return false;
            }
            },
            error : function(){

            }
        });
    });

//---------###Edit Delivery Address Section###----------



    {{-- $(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