@extends('layouts.agent.app')

@section('content')

<main id="main" class="main">
    <div class="pagetitle">
        <h1>Assign Order</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">
        <div class="row gy-4">
            <div class="col-xl-6">

                <div class="col-lg-12">
                    <div class="info-box card" style="padding: 10px 12px;">
                        <div class="row">
                                                        <div class="col-8">
                                <h4><b>{{ucwords($agents->name)}}</b></h4>
                                <h5><b>{{$agent_assinged->agent_order_id}}</b></h5>
                                {{-- <h6>
                                    <strong>Delivery Date:</strong>
                                    {{ date('jS M, Y' , strtotime($agent_assinged->delivery_date)) }}    
                                </h6>
                                <h6>
                                    <strong>Delivery Time:</strong>
                                    {{ $agent_assinged->delivery_time }}    
                                </h6> --}}
                            </div>

                            <div class="col-4" style="display:flex; gap: 20px">
                                <div>
                                    <a href="{{ url('/agent/assignorder/assign-order-view/invoice/' . encrypt($agent_assinged->agent_order_id) . '/' . encrypt($agents->id)) }}" target="_blank"><i class="bx bxs-printer" style="font-size: 25px; line-height: 1.2; color: #8d8d8d;"></i></a>
                                </div>
                                <div>
                                    <h5>
                                        @if($agent_assinged->status == 'P')
                                            <span class="badge bg-danger">PENDING</span>
                                        @elseif($agent_assinged->status == 'PC')
                                            <span class="badge bg-info">ACCEPTED</span>
                                        @elseif($agent_assinged->status == 'H')
                                            <span class="badge bg-warning">HOLD</span>
                                        @elseif($agent_assinged->status == 'CL')
                                            <span class="badge bg-dark">CANCEL</span>
                                        @elseif($agent_assinged->status == 'D')
                                            <span class="badge bg-success">DELIVERED</span>
                                        @elseif($agent_assinged->status == 'S')
                                            <span class="badge bg-primary">SHIPPED</span>
                                        @endif
                                    </h5>
                                </div>
                                
                            </div>

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

                <div class="col-lg-12">
                    <div class="info-box card" style="padding: 10px 12px;">
                        <div class="row">

                            <div class="col-12">
                                <p>
                                    <strong>Delivery Date:</strong>
                                    {{ date('jS M, Y' , strtotime($agent_assinged->delivery_date)) }}    
                                </p>
                                <p>
                                    <strong>Delivery Time:</strong>
                                    {{ $agent_assinged->delivery_time }}    
                                </p>
                                
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="info-box card" style="padding: 10px 12px;">
                        <div class="row">
                            <h4>Delivery Address</h4>
                            
                            <p style="padding-left: 3%;">
                                NA                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="info-box card" style="padding: 10px 12px;">
                        <div class="row">
                            <h4>Message Section</h4>
                            
                            <p style="padding-left: 3%;">
                                <strong>Sender Name:</strong> {{ $orders_Msg->sender_name }}
                                <br>
                                <strong>Sender Message: </strong>{{ $orders_Msg->sender_message }}
                                <br>
                                <strong>Special Instruction: </strong>{{ $orders_Msg->sender_special_instruction }}
                                <br>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="info-box card" style="padding: 10px 12px;">
                        <div class="row">
                            <div class="col-12">
                                @if(!empty($agent_assinged->comments))
                                    <div class="alert alert-primary alert-dismissible fade show" role="alert" style="margin-top: 10px;">
                                        <strong>Note :</strong> {{ $agent_assinged->comments }}
                                    </div>
                                @endif

                                @php
                                    $orderPlacedInfo = App\Http\Helper1::get_orderPlacedInfo($agent_assinged->OID);
                                @endphp
                                <p style="padding-left: 3%;">
                                    <strong>Order placed by :</strong> {{ $orderPlacedInfo->name }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                

            </div>

            <div class="col-xl-6">

                <div class="col-lg-12">
                    <div class="info-box card" style="padding: 10px 12px;">
                        <div class="row">
                            <h4>Delivery Items</h4>
                            <ol style="padding-left: 6%;">
                                                                @foreach($agent_product_list as $product)
                                    @if($product->agent_id == $agentId)
                                        <li style="font-size:15px">{{ucwords($product->item)}} 
                                            <span style="color:blue">[Qty : {{$product->qty}}]</span> 
                                        </li>
                                        @if(!empty($product->imagePath))
                                            <div class="row">
                                                <b>Personalize Image :</b>
                                                @php
                                                    //dd($product->imagePath);
                                                    $imagesPath = json_decode($product->imagePath);
                                                    //dd($imagesPath);
                                                @endphp
                                                @foreach($imagesPath as $img)
                                                    <div class="col-2">
                                                    {{-- {{ $img[0] }} --}}
                                                        <img src="{{ $img }}" style="width: 50px; height: 50px; /*margin: 5px;*/" />
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif

                                        @if(!empty($product->imageText))
                                            <div class="row">
                                                <b>Personalize Text :</b>
                                                <div class="col-12">
                                                    {!! $product->imageText !!}
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                @endforeach
                            </ol>
                            <hr>
                            <h5 style="padding-left:3%">
                                <b>Total : Rs. {{ $agent_assinged->totalPrice }}</b>
                                <small style="font-size:12px">(Total price included with delivery charge)</small>
                            </h5>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="info-box card" style="padding: 10px 12px;">
                        <div class="row">

                            @php $price=0; @endphp
                            <form action="{{url('/agent/assignorder/assign-order-view')}}/{{encrypt($agent_assinged->agent_order_id)}}/{{encrypt($agentId)}}" method="post">
                                @csrf
                                <table class="table">
                                    <thead>
                                        {{-- <tr>
                                            <th></th>
                                            <th></th>
                                        </tr> --}}
                                    </thead>
                                    <tbody>
                                        {{-- <tr>
                                            <td  colspan="2">
                                            <b>Total Price:</b>
                                                {{ $agent_assinged->totalPrice }}
                                            </td>
                                        </tr> --}}
                                        <tr>
                                            <td>
                                                <b>Extra Charge</b>&nbsp;<small style="font-size: 12px;">(Please metion reason)</small>
                                                <div class="input-group mb-3">
                                                  <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                  <input class="form-control" name="extra" id="extra" placeholder="Ask For Extra Charge" value="{{$agent_assinged->extra}}" {{$agent_assinged->status == 'P' ? '' : 'disabled'}}/>
                                                </div>
                                            </td>
                                            <td>
                                                <b>Delivery Charge</b>&nbsp;<small style="font-size: 12px;">(If needed)</small> 
                                                <div class="input-group mb-3">
                                                  <span class="input-group-text" id="basic-addon1">Rs.</span>
                                                  <input class="form-control" id="deliveryCharge" name="deliveryCharge" value="{{$agent_assinged->Deliver_charge}}" {{$agent_assinged->status == 'P' ? '' : 'disabled'}}/>
                                                </div>
                                                
                                            </td>
                                        </tr>
                                        {{--@if($agent_assinged->reason)
                                            <tr>
                                                <td colspan="2">
                                                    <div class="input-group">
                                                        <span class="input-group-text">Reason</span>
                                                        <textarea class="form-control" aria-label="With textarea" name="prev_reason" readonly>{{$agent_assinged->reason}}</textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endif--}}
                                        <tr>
                                            <td colspan="2">
                                            <b>Enter The Reason</b>
                                                {{-- <textarea name="reason" rows="4" cols="50" id="reason" placeholder="Reason" class="form-control">{{$agent_assinged->reason}}
                                                </textarea> --}}

                                                <div class="form-floating mb-3">
                                                  <textarea class="form-control" placeholder="Reason" name="reason" id="reason" style="height: 100px;">{{$agent_assinged->reason}}</textarea>
                                                  <label for="reason">Reasons</label>
                                                </div>

                                                @error('reason')
                                                <label class="alert alert-danger" role="alert">{{ $message }}</label>
                                                @enderror
                                            </td>
                                        </tr>
                                        <tr>
                                            @if($agent_assinged->status == 'PC' || $agent_assinged->track_no != "")
                                                @if($agents->agent_type != 'H')
                                                    <td colspan="">
                                                        <label class="form-label">Tracking Link</label>
                                                        <input class="form-control" name="tracking_link" value="{{$agent_assinged->tracking_link}}" style="width:100%;" placeholder="Enter Tracking Link" >
                                                        {{--@error('track_no')
                                                        <label class="alert alert-danger" role="alert">{{ $message }}</label>
                                                        @enderror--}}
                                                    </td>

                                                    <td colspan="">
                                                        <label class="form-label">Tracking No</label>
                                                        <input class="form-control" name="track_no" value="{{$agent_assinged->track_no}}" style="width:100%;" placeholder="Enter Tracking Number" >
                                                        @error('track_no')
                                                        <label class="alert alert-danger" role="alert">{{ $message }}</label>
                                                        @enderror
                                                    </td>
                                                @endif
                                                
                                            @endif
                                        </tr>
                                        
                                        <tr>
                                            <td style="width: 60%;/*text-align: center!important;display:flex;margin-left: 81%;*/">
                                                @if($agent_assinged->status == "P")
                                                    <div class="actionDiv">
                                                        <div class="actionRadioDiv">
                                                            <input  type="radio" id="accept" name="status" value="PC">
                                                            <label for="accept">Accept</label>
                                                        </div>
                                                        <div class="actionRadioDiv">
                                                            <input type="radio" id="hold" name="status" value="H">
                                                            <label for="hold">Hold</label>
                                                        </div>
                                                        <!-- <div class="actionRadioDiv">
                                                            <input class="form-check-input" type="radio" id="reject" name="status" value="CL">
                                                            <label for="reject">Reject</label>
                                                        </div> -->
                                                    </div>
                                                @elseif($agent_assinged->status == "PC")
                                                    <div class="actionDiv">
                                                        @if($agents->agent_type == 'H')
                                                            <div class="actionRadioDiv">
                                                                <input type="radio" id="accept" name="status" value="D">
                                                                <label for="accept">Delivered</label>
                                                            </div>
                                                        @else
                                                            <div class="actionRadioDiv">
                                                                <input type="radio" id="accept" name="status" value="S">
                                                                <label for="accept">Shipped</label>
                                                            </div>
                                                        @endif
                                                        <div class="actionRadioDiv">
                                                            <input type="radio" id="hold" name="status" value="H">
                                                            <label for="hold">Hold</label>
                                                        </div>
                                                        <!-- <div class="actionRadioDiv">
                                                            <input class="form-check-input" type="radio" id="reject" name="status" value="CL">
                                                            <label for="reject">Reject</label>
                                                        </div> -->
                                                    </div>
                                                @elseif($agent_assinged->status == "S")
                                                    <div class="actionDiv">
                                                        <div class="actionRadioDiv">
                                                            <input type="radio" id="accept" name="status" value="D">
                                                            <label for="accept">Delivered</label>
                                                        </div>
                                                        <div class="actionRadioDiv">
                                                            <input type="radio" id="hold" name="status" value="H">
                                                            <label for="hold">Hold</label>
                                                        </div>
                                                    </div>
                                                @elseif($agent_assinged->status == "CL")

                                                @elseif($agent_assinged->status == "H")
                                                    <div class="actionDiv">
                                                        <div class="actionRadioDiv">
                                                            <input type="radio" id="accept" name="status" value="PC">
                                                            <label for="accept">Accept</label>
                                                        </div>
                                                        <!-- <div class="actionRadioDiv">
                                                            <input class="form-check-input" type="radio" id="reject" name="status" value="CL">
                                                            <label for="reject">Reject</label>
                                                        </div> -->
                                                    </div>

                                                    {{-- @elseif($agent_assinged->status == "H") --}}

                                                @elseif($agent_assinged->status == "D")
                                                    <button type="button" class="btn btn-success" disabled="">DELIVERED</button>
                                                @endif
                                                @error('status')
                                                    <label  class="alert alert-danger" role="alert">{{ $message }}</label>
                                                @enderror
                                            </td>
                                            <td style="text-align:right">
                                                @if($agent_assinged->status == 'CL' || $agent_assinged->status == 'D')
                                                @else
                                                    <button type="submit" class="btn btn-success">Submit</button>
                                                @endif
                                            </td>
                                        </tr>
                                        {{-- <tr>
                                            <td colspan="2">
                                                @error('status')
                                                <label  class="alert alert-danger" role="alert">{{ $message }}</label>
                                                @enderror
                                                @error('track_no')
                                                <label class="alert alert-danger" role="alert">{{ $message }}</label>
                                                @enderror
                                                @error('reason')
                                                <label class="alert alert-danger" role="alert">{{ $message }}</label>
                                                @enderror
                                            </td>
                                        </tr> --}}
                                        {{-- <tr>
                                        @if($agent_assinged->status == 'CL' || $agent_assinged->status == 'D')
                                        @else
                                        <td colspan="2" style="text-align:center">
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </td>
                                        @endif
                                        </tr> --}}
                                    </tbody>
                                </table>
                            </form>

                        </div>
                    </div>
                </div>
                
                @if($agent_assinged->status == "S" || $agent_assinged->status == "D")
                    <div class="col-lg-12">
                        <div class="info-box card" style="padding: 10px 12px;">
                            <div class="row">
                                <div class="col-12">
                                    <h5>Proof of Delivery :</h5>
                                    @if(empty($delivered_product_image) || count($delivered_product_image) == 0)
                                        
                                            <div class="upload__box" style="text-align: left;">
                                                <div class="upload__btn-box">
                                                    <label class="upload__btn">
                                                        <p>(+) Upload images</p>
                                                        <input type="file" multiple name="images[]" data-max_length="20" class="upload__inputfile" required>
                                                    </label>
                                                </div>
                                                <div class="upload__img-wrap"></div>
                                            </div>
                                            <div id="appendUploadButton" style="text-align: center;"></div>
                                        
                                    @else
                                        <div class="upload__img-wrap row" style="text-align: center;">
                                            @foreach($delivered_product_image as $data)
                                                <div class="col-3">
                                                    <div class="upload__img-box">
                                                        <img src="{{ $data->image }}" alt="Uploaded Image" style="width: 120px; height: auto; border-radius: 5px; margin: 5px;">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

    </section>
</main>


{{-- 

<main id="main" class="main">
   <div class="container">
         <div class="card" style="width: 100%;">          
            <div class="card-body">
            <h5 class="card-title">AGENT NAME :{{$agents->name}} </h5> 
                <h5 class="card-title">PRODUCT DETAILS </h5> 
                    @if($agent_assinged->status=='P')
                        <div class="alert alert-danger" role="alert" style="width: 20%;text-align:center;">PENDING</div>
                        @elseif($agent_assinged->status=='PC')
                        <div class="alert alert-secondary" role="alert" style="width: 20%;text-align:center;">PROGRESS</div>
                        @elseif($agent_assinged->status=='CL')
                        <div class="alert alert-info" role="alert" style="width: 20%;text-align:center;">CANCEL</div>
                        @elseif($agent_assinged->status=='H')
                        <div class="alert alert-dark" role="alert" style="width: 20%;text-align:center;">HOLD</div>
                        @elseif($agent_assinged->status=='D')
                        <div class="alert alert-success" role="alert" style="width: 20%;text-align:center;">DELIVERED</div>
                        @elseif($agent_assinged->status=='S')
                        <div class="alert alert-success" role="alert" style="width: 20%;text-align:center;">Shipped</div>
                    @endif
                <h6 class="card-subtitle mb-2 text-body-secondary">ORDER NO : {{$agent_assinged->agent_order_id}}</h6>
                    <div style="text-align:right">
                           
                    </div>
                <p class="card-text"><b>Products</b></p>
                <ol>
                    @foreach($agent_product_list as $product)
                        @if($product->agent_id == $agentId)
                                <li>{{$product->item}}</li>
                        @endif
                    @endforeach
                </ol>
                <p><b>Delivery Address :</b> {{$orders->delivery_address}}</p>
                <p><b>Customer Contact :</b> {{$orders->billing_mobile}}</p>
                @php $price=0; @endphp
                <form action="{{url('/admin/order/assign-order-view')}}/{{$agent_assinged->agent_order_id}}/{{$agentId}}" method="post">
                    @csrf
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td  colspan="2">
                                <b>Total Price:</b>
                                    {{ $agent_assinged->totalPrice }}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Extra</b>
                                    <input class="form-control" name="extra" id="extra" placeholder="Ask For Extra Charge" value="{{$agent_assinged->extra}}"/>
                                </td>
                                <td>
                                    <b>Delivery Charge</b> <input class="form-control" id="deliveryCharge" name="deliveryCharge" value="{{$agent_assinged->Deliver_charge}}"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                <b>Enter The Reason</b>
                                    <textarea name="reason" rows="4" cols="50" id="reason" placeholder="Reason" class="form-control">{{$agent_assinged->reason}}
                                    </textarea>
                                </td>
                            </tr>
                            <tr>
                                @if($agent_assinged->status == 'PC' || $agent_assinged->track_no != "")
                                    <td colspan="2"><input class="form-control" name="track_no" value="{{$agent_assinged->track_no}}" style="width:100%;" placeholder="Enter Tracking Number" ></td>
                                @endif
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: center!important;display:flex;margin-left: 81%;">
                                @if($agent_assinged->status == "P")
                                    <input type="radio" id="accept" name="status" value="PC">
                                    <label for="accept">Accept</label><br>
                                    <input type="radio" id="hold" name="status" value="H">
                                    <label for="hold">Hold</label><br>
                                    <!-- <input type="radio" id="reject" name="status" value="CL">
                                    <label for="reject">Reject</label> -->
                                @elseif($agent_assinged->status == "PC")
                                    <input type="radio" id="accept" name="status" value="S">
                                    <label for="accept">Shipped</label><br>
                                    <input type="radio" id="hold" name="status" value="H">
                                    <label for="hold">Hold</label><br>
                                    <!-- <input type="radio" id="reject" name="status" value="CL">
                                    <label for="reject">Reject</label> -->
                                @elseif($agent_assinged->status == "S")
                                    <input type="radio" id="accept" name="status" value="D">
                                    <label for="accept">Delivered</label><br>
                                    <input type="radio" id="hold" name="status" value="H">
                                    <label for="hold">Hold</label><br>
                                @elseif($agent_assinged->status == "CL")

                                @elseif($agent_assinged->status == "H")
                                    <input type="radio" id="accept" name="status" value="PC">
                                    <label for="accept">Accept</label><br>
                                    <!-- <input type="radio" id="reject" name="status" value="CL">
                                    <label for="reject">Reject</label> -->
                                    @elseif($agent_assinged->status == "H")

                                @endif
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    @error('status')
                                    <label  class="alert alert-danger" role="alert">{{ $message }}</label>
                                    @enderror
                                    @error('track_no')
                                    <label class="alert alert-danger" role="alert">{{ $message }}</label>
                                    @enderror
                                    @error('reason')
                                    <label class="alert alert-danger" role="alert">{{ $message }}</label>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                            @if($agent_assinged->status == 'CL' || $agent_assinged->status == 'D')
                            @else
                            <td colspan="2" style="text-align:center">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </td>
                            @endif
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
   </div>
</main> --}}

<style>
    .actionDiv{display: flex; justify-content: start; align-items: center; gap: 25px; font-size: 16px;
    font-weight: 500; cursor:pointer}
    .actionRadioDiv{ display: flex; align-items: center; gap: 8px;border: 1px solid #dcdcdc;padding: 4px 5px; border-radius: 4px; cursor:pointer}
    .actionRadioDiv input{position: relative;border: 1px solid #000;border-radius: 2px;background: none;cursor: pointer;line-height: 0;outline: 0;padding: 0 !important;vertical-align: text-top;height: 1.1vw;width: 1.3vw;-webkit-appearance: none;opacity: .5;background-color: #fff;}
    {{-- .actionRadioDiv input:checked { background-color: #4154f1; opacity: 1; } --}}
    .actionRadioDiv input:before{ content: ''; position: absolute; right: 50%; top: 50%; width: 6px; height: 13px; border: solid #FFF; border-width: 0 1px 1px 0; margin: -1px -1px 0 -1px; transform: rotate(45deg) translate(-50%, -50%); z-index: 2; }
    .actionRadioDiv:has(input[type="radio"]:checked){border: 1px solid #cacaca;background-color: #f8f9fa;}
    .actionRadioDiv input:checked:before{border: 1px solid #1e31d0;border-width: 0 3px 3px 0;}
    .card{margin-bottom: 15px!important;}
    @charset "UTF-8";
    html * { box-sizing: border-box;}
    p {  margin: 0;}
    .upload__box {padding: 8px;  }
    .upload__inputfile {width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}
    .upload__btn {display: inline-block; font-weight: 600; color: #fff; text-align: center; min-width: 116px; padding: 5px; transition: all 0.3s ease; cursor: pointer; border: 2px solid; background-color: #4045ba; border-color: #4045ba; border-radius: 10px; line-height: 26px; font-size: 14px; }
    .upload__btn:hover {background-color: unset; color: #4045ba; transition: all 0.3s ease; }
    .upload__btn-box {margin-bottom: 10px; }
    .upload__img-wrap {display: flex; flex-wrap: wrap; margin: 0 -10px; }
    .upload__img-box {width: 110px; padding: 0 10px; margin-bottom: 12px; }
    .upload__img-close {width: 20px; height: 20px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 3px; right: 3px; text-align: center; line-height: 21px; z-index: 1; cursor: pointer; }
    .upload__img-close:after {content: "✖"; font-size: 14px; color: white; }
    .img-bg {background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; padding-bottom: 100%; }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
       $('.btn_submit').click(function(){
            var orderId = @json($agent_assinged->agent_order_id);
            var extra = $('#extra').val();
            var deliVery = $('#deliveryCharge').val();
            var reason = $('#reason').val();
            var status = $(this).attr('ds-value');
            console.log(status);
            $.ajax({
                url:"{{url('/agent/assignorder/updateStatus')}}",
                type:'GET',
                data:{
                    orderId:orderId,
                    extra:extra,
                    deliVery:deliVery,
                    reason:reason,
                    status:status,
                },
                success:function(response){
                    console.log(response);
                },
                error:function(error){
                    console.log(error);
                },
            });
       });

               jQuery(document).ready(function () {
            ImgUpload();
        });

        function ImgUpload() {
            var imgWrap = "";
            var imgArray = [];
            $('.upload__inputfile').each(function () {

                $(this).on('change', function (e) {

                $('#appendUploadButton').empty().append(`
                     <button id="upload_images" class="btn btn-primary">Upload</button>
                `);

                imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
                var maxLength = $(this).attr('data-max_length');

                var files = e.target.files;
                var filesArr = Array.prototype.slice.call(files);
                var iterator = 0;
                filesArr.forEach(function (f, index) {

                    if (!f.type.match('image.*')) {
                    return;
                    }

                    if (imgArray.length > maxLength) {
                    return false
                    } else {
                    var len = 0;
                    for (var i = 0; i < imgArray.length; i++) {
                        if (imgArray[i] !== undefined) {
                        len++;
                        }
                    }
                    if (len > maxLength) {
                        return false;
                    } else {
                        imgArray.push(f);

                        var reader = new FileReader();
                        reader.onload = function (e) {
                        var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
                        imgWrap.append(html);
                        iterator++;
                        }
                        reader.readAsDataURL(f);
                    }
                    }
                });
                });
            });

            $('body').on('click', ".upload__img-close", function (e) {
                var file = $(this).parent().data("file");
                for (var i = 0; i < imgArray.length; i++) {
                    if (imgArray[i].name === file) {
                        imgArray.splice(i, 1);
                        break;
                        
                    }
                }
                $(this).parent().parent().remove();
                if(i == 0){
                    $('#upload_images').css('display','none');
                }
            });
        }

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

            let base64Images = [];

            $('.img-bg').each(function () {
                let bgImage = $(this).css('background-image');
                let base64 = bgImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
                base64Images.push(base64);

               
            });
            //  console.log(base64Images);
            $.ajax({
                url: "{{ url('/agent/assignorder/assign-order-view/product-image-upload') }}", // Replace with your route
                method: "POST",
                data: {
                    id: '{{encrypt($agent_assinged->id)}}',
                    images: base64Images,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if(response == 'done'){
                        alert("Image uploaded successfully");
                        location.reload();
                    }else{
                        alert("Error");
                    }
                    // console.log(response);
                    // alert('Images uploaded successfully');
                    // Optionally clear UI or show success message
                },
                error: function (err) {
                    alert('Upload failed');
                }
            });
            
        });
    });
</script>

@endsection