@extends('Admin.layout.app')

@section('title', 'WhatsApp Chat')

@section('content')

<div class="container-fluid">

    <div class="row g-0">

        <!-- Customers -->
        <div class="col-md-3 border-end p-0 bg-white">

               <div class="p-3 bg-success text-white">
                   <h5 class="mb-0">
                       <i class="fab fa-whatsapp"></i>
                       WhatsApp Chats
                   </h5>
               </div>
     
              <div  style="height:calc(100vh - 56px);overflow-y:auto;">
              
              @foreach($customers as $customer)
              
                <div class="customer-item p-3 border-bottom {{ isset($selected) && $selected->phone == $customer->phone ? 'selected-chat' : '' }}">

                    <div class="d-flex align-items-start">
                
                        <!-- Clickable Area -->
                        <a href="{{ route('admin.whatsapp.chat', $customer->phone) }}"  class="text-decoration-none text-dark flex-grow-1">

                        <div class="d-flex">

                           <!-- Avatar -->
                           <div class="me-3">

                               <div class="rounded-circle bg-success text-white d-flex justify-content-center align-items-center"
                                    style="width:50px;height:50px;font-weight:bold;font-size:20px;">

                                   {{ strtoupper(mb_substr($customer->name,0,1)) }}

                               </div>

                           </div>

                           <!-- Info -->
                           <div class="flex-grow-1">

                               <div class="d-flex justify-content-between">

                                   <strong>{{ $customer->name }}</strong>

                                   <small class="text-muted">
                                       {{ $customer->last_time }}
                                   </small>

                               </div>

                               <div class="d-flex justify-content-between mt-1">

                                   <small class="text-muted text-truncate"
                                          style="max-width:170px;">

                                       {{ $customer->last_message }}

                                   </small>

                                   @if($customer->unread)

                                       <span class="badge rounded-pill bg-success">

                                           {{ $customer->unread }}

                                       </span>

                                   @endif

                               </div>

                              

                           </div>

                        </div>

                         </a>
                         <div class="ms-2">

                                @if($customer->pending_transfer)

                                    <button class="btn btn-success btn-sm accept-transfer"
                                            data-id="{{ $customer->transfer_id }}">
                                        Accept
                                    </button>

                                    <button class="btn btn-danger btn-sm reject-transfer"
                                            data-id="{{ $customer->transfer_id }}">
                                        Reject
                                    </button>

                                @endif
                        </div>
                
                        <!-- Right Side -->
                        <div class="ms-2 text-end">

            @if(!$customer->assigned_to)

                <span class="badge bg-warning text-dark mb-1">
                    Unassigned
                </span>

                <button
                    class="btn btn-sm btn-primary claim-chat"
                    data-id="{{ $customer->id }}">

                    Claim

                </button>

            @elseif($customer->assigned_to == auth()->guard('admin')->id())

                <span class="badge bg-success">
                    Mine
                </span>

            @else

                <span class="badge bg-secondary">

                    {{ optional($customer->assignedAdmin)->name }}

                </span>

            @endif

        </div>
                
                    </div>

                 </div>
              
              @endforeach
              
              </div>

        </div>

        <!-- Chat -->
      <div class="col-md-9 p-0 bg-light d-flex flex-column" style="height:calc(100vh - 56px);">

         @if(isset($selected))
         
         <!-- Chat Header -->
         <div class="bg-white border-bottom px-4 py-3 shadow-sm"  style="flex-shrink:0;">

             <div class="d-flex justify-content-between align-items-center">

                      <!-- Left -->
                     <div class="d-flex align-items-center">
             
                         <div class="rounded-circle bg-success text-white d-flex justify-content-center align-items-center"
                              style="width:45px;height:45px;font-weight:bold;font-size:18px;">
             
                             {{ strtoupper(substr($selected->name,0,1)) }}
             
                         </div>
             
                         <div class="ms-3">
             
                             <h5 class="mb-0">{{ $selected->name }}</h5>
             
                             <small class="text-muted">
                                 {{ $selected->phone }}
                             </small>
             
                         </div>
             
                     </div>

                       <!-- Right -->
                     <div class="d-flex align-items-center gap-2">
                
                         {{-- Ownership --}}
                         <div class="dropdown">

                                 @if(!$selected->assigned_to)

                                     <button class="btn btn-sm btn-warning dropdown-toggle"
                                             data-bs-toggle="dropdown">
                                         Unassigned
                                     </button>

                                 @elseif($selected->assigned_to == auth()->guard('admin')->id())

                                     <button class="btn btn-sm btn-success dropdown-toggle"
                                             data-bs-toggle="dropdown">
                                         Mine
                                     </button>

                                 @else

                                     <button class="btn btn-sm btn-secondary dropdown-toggle"
                                             data-bs-toggle="dropdown">
                                         {{ optional($selected->assignedAdmin)->name }}
                                     </button>

                                 @endif

                               <ul class="dropdown-menu dropdown-menu-end">

                                   {{-- Unassigned --}}
                                   @if(!$selected->assigned_to)

                                       <li>
                                           <a class="dropdown-item claim-chat"
                                              href="#"
                                              data-id="{{ $selected->id }}">
                                               <i class="bi bi-person-check me-2"></i>
                                               Claim Chat
                                           </a>
                                       </li>

                                   {{-- Mine --}}
                                   @elseif($selected->assigned_to == auth()->guard('admin')->id())

                                       <li>
                                           <a class="dropdown-item transfer-chat"
                                              href="#"
                                              data-id="{{ $selected->id }}">
                                               <i class="bi bi-arrow-left-right me-2"></i>
                                               Transfer Chat
                                           </a>
                                       </li>

                                       <li>
                                           <a class="dropdown-item unclaim-chat"
                                              href="#"
                                              data-id="{{ $selected->id }}">
                                               <i class="bi bi-unlock me-2"></i>
                                               Unclaim Chat
                                           </a>
                                       </li>

                                   {{-- Assigned to another admin --}}
                                   @else

                                       <li>
                                           <span class="dropdown-item-text text-muted">
                                               <i class="bi bi-lock me-2"></i>
                                               Owned by {{ optional($selected->assignedAdmin)->name }}
                                           </span>
                                       </li>

                                   @endif

                               </ul>

                        </div>

                         {{-- Chat Menu --}}
                         <div class="dropdown">

                             <button class="btn btn-light btn-sm border rounded-circle"
                                     data-bs-toggle="dropdown">

                                 <i class="bi bi-three-dots-vertical"></i>

                             </button>

                             <ul class="dropdown-menu dropdown-menu-end">

                                 <li>
                                     <a class="dropdown-item customer-details"
                                        href="#">

                                         <i class="bi bi-person me-2"></i>

                                         Customer Details

                                     </a>
                                 </li>

                                 <li>
                                     <a class="dropdown-item order-history"
                                        href="#">

                                         <i class="bi bi-bag me-2"></i>

                                         Order History

                                     </a>
                                 </li>

                                 <li><hr class="dropdown-divider"></li>

                                 <li>
                                     <a class="dropdown-item text-danger close-chat"
                                        href="#">

                                         <i class="bi bi-x-circle me-2"></i>

                                         Close Chat

                                     </a>
                                 </li>

                             </ul>

                         </div>

                     </div>

             </div>

         </div>
         
         <!-- Messages -->
         <div id="chat-box" class="flex-grow-1" style="
             overflow-y:auto;
             padding:20px;
             background-image:url('/storage/img/whatsapp-bg.png');
             background-repeat:repeat;
             background-position:center;
             background-size:300px;">


             @foreach($messages as $msg)
             

               @if($msg->direction=='incoming')
               
                 <div class="d-flex mb-3">
        
            <div class="bg-white shadow-sm px-3 py-2"
               style="max-width:70%;
                border-radius:0 12px 12px 12px;">
        
              <div>
                @if(in_array($msg->type, ['image', 'sticker']))

               <img src="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}"
                    class="img-fluid rounded chat-image"
                    style="max-width:150px;cursor:pointer;"
                    data-bs-toggle="modal"
                    data-bs-target="#imageModal"
                    data-image="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}">


               
               @elseif($msg->type == 'audio')
               
                   <audio controls preload="metadata">
                       <source src="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}">
                       Your browser does not support the audio element.
                   </audio>
               
               @elseif($msg->type == 'video')
               
                   <video controls style="max-width:250px;">
                       <source src="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}">
                   </video>
               
               @elseif($msg->type == 'document')
               
                   <a href="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}" target="_blank">
                       📄 {{ $msg->message }}
                   </a>
               
               @else
               
                   {{ $msg->message }}
               
               @endif
                   

                    </div>

                    <div class="text-end">

                        <small class="text-muted">

                            {{ $msg->created_at->format('h:i A') }}

                        </small>

                    </div>

                </div>

            </div>

               @else

                <div class="d-flex justify-content-end mb-3">

             <div class="px-3 py-2 shadow-sm"
                  style="max-width:70%;
                         background:#d9fdd3;
                         border-radius:12px 0 12px 12px;">

                 <div>
                     @if($msg->type == 'image')
        
                       <img src="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}"
                      class="img-fluid rounded chat-image"
                      style="max-width:150px;cursor:pointer;"
                      data-bs-toggle="modal"
                      data-bs-target="#imageModal"
                      data-image="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}">
            
                      @elseif($msg->type == 'audio')
                      
                          <audio controls preload="metadata">
                              <source src="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}">
                              Your browser does not support the audio element.
                          </audio>
                      
                      @elseif($msg->type == 'video')
                      
                          <video controls style="max-width:250px;">
                              <source src="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}">
                          </video>
                      
                      @elseif($msg->type == 'document')
                      
                          <a href="{{ asset('/whatsapp/attachment/'.$msg->file_name) }}" target="_blank">
                              📄 {{ $msg->message }}
                          </a>
                      
                      @else
                      
                          {{ $msg->message }}
                      
                      @endif

                 </div>

                 <div class="text-end">

                     <small class="text-muted">

                         {{ $msg->created_at->format('h:i A') }}

                         <i class="fa fa-check-double text-primary ms-1"></i>

                     </small>

                 </div>

             </div>

         </div>

               @endif

             @endforeach

          </div>
         
         <!-- Footer -->
             <div class="bg-white border-top p-3" style="flex-shrink:0;">

                <audio id="notificationSound" preload="auto">
                    <source src="{{ asset('/storage/sound/notification.mp3') }}" type="audio/mpeg">
                </audio>

               <form id="sendMessageForm"
                     action="{{ route('admin.whatsapp.send') }}"
                     method="POST">
           
                   @csrf
           
                   <input type="hidden"
                          name="phone"
                          value="{{ '92'.substr($selected->phone,1) }}">
           
                   <div class="input-group">
           
                       <button class="btn btn-light" type="button">
                           <i class="fa fa-smile-o fa-lg"></i>
                       </button>
           
                       <input type="file"
                              id="attachment"
                              hidden
                              accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.mp3,.ogg,.wav,.mp4">
           
                       <button type="button"
                               class="btn btn-light"
                               id="attachBtn">
                           <i class="fa fa-paperclip fa-lg"></i>
                       </button>
           
                       <!-- Microphone -->
                       <button type="button"
                               class="btn btn-light"
                               id="record-btn">
                           <i class="fa fa-microphone text-danger"></i>
                       </button>
           
                       <!-- Stop Recording -->
                       <button type="button"
                               class="btn btn-danger d-none"
                               id="stop-btn">
                           <i class="fa fa-stop"></i>
                       </button>
           
                       <input
                           type="text"
                           id="message"
                           class="form-control border-0"
                           name="message"
                           placeholder="Type a message..."
                           autocomplete="off"
                           required>
           
                       <button class="btn btn-success">
                           <i class="fa fa-paper-plane"></i>
                       </button>
           
                   </div>
           
                   <!-- Recording Timer -->
                   <div class="mt-2">
                       <span id="recording-time"
                             class="text-danger d-none">
                           🎤 Recording... 00:00
                       </span>
                   </div>
           
                 </form>

             </div>
         
             @else
         
             <div class="d-flex justify-content-center align-items-center"
        style="height:100%;min-height:700px;background:#efeae2;">
   
       <div class="text-center">
   
           <i class="fa fa-whatsapp text-success"
              style="font-size:90px;"></i>
   
           <h3 class="mt-3 text-muted">
   
               WhatsApp Business
   
           </h3>
   
           <p class="text-muted">
   
               Select a customer to start chatting.
   
           </p>
   
       </div>
   
    </div>

          @endif

      </div>

    </div>

</div>


<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content bg-dark border-0">

            <div class="modal-header border-0">
                <button type="button"
                        class="btn-close btn-close-white"
                        data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body text-center p-2">
                <img id="modalImage"
                     src=""
                     class="img-fluid rounded"
                     style="max-height:80vh;">
            </div>

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

@if(isset($selected))
<!-- Transfer Chat Modal -->
<div class="modal fade" id="transferModal" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <form action="{{ route('admin.whatsapp.transferRequest', $selected->id) }}"
                  method="POST">

                @csrf

                <div class="modal-header">

                    <h5 class="modal-title">
                        <i class="bi bi-arrow-left-right me-2"></i>
                        Transfer Chat
                    </h5>

                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <div class="alert alert-info mb-3">

                        <strong>Customer:</strong> {{ $selected->name }} <br>

                        <strong>Phone:</strong> {{ $selected->phone }}

                    </div>

                    <div class="mb-3">

                        <label class="form-label">
                            Transfer To <span class="text-danger">*</span>
                        </label>

                        <select name="admin_id"
                                class="form-select"
                                required>

                            <option value="">
                                -- Select Admin --
                            </option>

                            @foreach($admins as $admin)

                                @if($admin->id != auth()->guard('admin')->id())

                                    <option value="{{ $admin->id }}">
                                        {{ $admin->username }}
                                    </option>

                                @endif

                            @endforeach

                        </select>

                    </div>

                    <div class="mb-3">

                        <label class="form-label">
                            Reason
                        </label>

                        <select name="reason" class="form-select">

    <option value="">-- Select Reason --</option>

    <option value="Sales">Sales</option>

    <option value="Technical Support">Technical Support</option>

    <option value="Billing">Billing</option>

    <option value="Refund">Refund</option>

    <option value="Complaint">Complaint</option>

    <option value="Other">Other</option>

</select>

                    </div>

                    <div class="mb-3">

                        <label class="form-label">
                            Notes
                        </label>

                        <textarea name="notes"
                                  rows="4"
                                  class="form-control"
                                  placeholder="Write any notes for the receiving admin..."></textarea>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">

                        Cancel

                    </button>

                    <button type="submit"
                            class="btn btn-success">

                        <i class="bi bi-send me-1"></i>

                        Send Transfer Request

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>
@endif

<!-- Transfer Chat Modal -->
<!--
<div class="modal fade" id="transferModal" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <form id="transferForm" method="POST">

                @csrf

                <div class="modal-header">

                    <h5 class="modal-title">
                        <i class="bi bi-arrow-left-right me-2"></i>
                        Transfer Chat
                    </h5>

                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <p class="text-muted mb-3">
                        Select the admin who will handle this conversation.
                    </p>

                    <div class="mb-3">

                        <label class="form-label">
                            Transfer To
                        </label>

                        <select class="form-select"
                                name="admin_id"
                                required>

                            <option value="">
                                -- Select Admin --
                            </option>

                            @foreach($admins as $admin)

                                @if($admin->id != auth()->guard('admin')->id())

                                    <option value="{{ $admin->id }}">
                                        {{ $admin->username }}
                                    </option>

                                @endif

                            @endforeach

                        </select>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">

                        Cancel

                    </button>

                    <button type="submit"
                            class="btn btn-success">

                        <i class="bi bi-arrow-left-right me-1"></i>
                        Transfer Chat

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>
-->
@endsection

@push('script')

@if(isset($selected))

<script>
    let lastMessageId = {{ $messages->last()?->id ?? 0 }};

$("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);

function appendMessage(msg)
{
    let time = msg.created_at;

    let media = '';

    if (msg.media) {

        if (msg.type == 'image') {

            media = `
             <div class="mb-2">
                 <img src="/${msg.media}"
                      class="img-fluid rounded chat-image"
                      style="max-width:150px;cursor:pointer;"
                      data-bs-toggle="modal"
                      data-bs-target="#imageModal"
                      data-image="/${msg.media}">
             </div>`;

        } else if (msg.type == 'audio') {

            media = `
                <div class="mb-2">
                    <audio controls preload="metadata">
                        <source src="/${msg.media}">
                        Your browser does not support the audio element.
                    </audio>
                </div>`;

        } else if (msg.type == 'video') {

            media = `
                <div class="mb-2">
                    <video controls style="max-width:220px;" class="rounded">
                        <source src="/${msg.media}">
                        Your browser does not support the video tag.
                    </video>
                </div>`;

        } else if (msg.type == 'document') {

            media = `
                <div class="mb-2">
                    <a href="/${msg.media}" target="_blank" class="text-decoration-none">
                        <i class="fa fa-file"></i> ${msg.message}
                    </a>
                </div>`;
        }
    }

    let html = '';

    if (msg.direction == 'incoming') {

        html = `
        <div class="d-flex mb-3">

            <div class="bg-white shadow-sm px-3 py-2"
                 style="max-width:70%; border-radius:0 12px 12px 12px;">

                ${media}

                ${msg.type != 'document' ? `<div>${msg.message ?? ''}</div>` : ''}

                <div class="text-end">
                    <small class="text-muted">${time}</small>
                </div>

            </div>

        </div>`;

    } else {

        html = `
        <div class="d-flex justify-content-end mb-3">

            <div class="px-3 py-2 shadow-sm"
                 style="max-width:70%; background:#d9fdd3; border-radius:12px 0 12px 12px;">

                ${media}

                ${msg.type != 'document' ? `<div>${msg.message ?? ''}</div>` : ''}

                <div class="text-end">
                    <small class="text-muted">
                        ${time}
                        <i class="fa fa-check-double text-primary ms-1"></i>
                    </small>
                </div>

            </div>

        </div>`;
    }

    $("#chat-box").append(html);
    $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);
}

$('#sendMessageForm').submit(function(e){

    e.preventDefault();

    let form = $(this);
    let button = form.find('button[type="submit"]');

    button.prop('disabled', true);

    $.ajax({

        url: form.attr('action'),
        type: 'POST',
        data: form.serialize(),

        success: function(response){

            appendMessage(response.message);

            lastMessageId = response.message.id;

            $('#message').val('').focus();

        },

        error:function(){

            alert('Unable to send message.');

        },

        complete:function(){

            button.prop('disabled', false);

        }

    });

});

function loadMessages()
{
    $.get(
        "{{ url('admin/whatsapp/messages/'.$selected->phone) }}/" + lastMessageId,
        function(messages){

            if(messages.length === 0){
                return;
            }

            messages.forEach(function(msg){

                // Format the time
                msg.created_at = new Date(msg.created_at).toLocaleTimeString([], {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });

                // Add message to chat
                appendMessage(msg);

                // Update last message ID
                lastMessageId = msg.id;

                // Play notification only for incoming messages
                if (msg.direction === 'incoming') {

    console.log("Incoming message detected");

    const audio = document.getElementById('notificationSound');

    console.log(audio);

    audio.currentTime = 0;

    audio.play()
        .then(() => console.log("Sound played"))
        .catch(err => console.log("Play failed:", err));

}

            });

        }
    ).fail(function(xhr){
        console.log('Failed to load messages:', xhr.status);
    });
}

document.addEventListener('click', function () {
    const audio = document.getElementById('notificationSound');

    if (audio) {
        audio.play()
            .then(() => {
                audio.pause();
                audio.currentTime = 0;
            })
            .catch(() => {});
    }
}, { once: true });

setInterval(loadMessages,2000);

function loadCustomers()
{
   
}

setInterval(loadCustomers, 2000);

$(document).on('click', '.chat-image', function () {

    $('#modalImage').attr('src', $(this).data('image'));

});

$('#attachBtn').click(function () {

    $('#attachment').click();

});

$('#attachment').change(function(){

    if(this.files.length === 0){
        return;
    }

    let formData = new FormData();

    formData.append('_token', '{{ csrf_token() }}');
    formData.append('phone', $('input[name="phone"]').val());
    formData.append('attachment', this.files[0]);

    $.ajax({

        url: "{{ route('admin.whatsapp.sendAttachment') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,

        success:function(response){

            appendMessage(response.message);

            lastMessageId = response.message.id;

        },

       error:function(xhr){

    console.log(xhr.status);
    console.log(xhr.responseText);

    alert(xhr.responseText);

}

    });

});



let mediaRecorder = null;
let audioChunks = [];
let recordingInterval = null;
let recordingSeconds = 0;
let currentStream = null;

// =========================
// START RECORDING
// =========================
$(document).on("click", "#record-btn", async function () {

    if (mediaRecorder && mediaRecorder.state === "recording") {
        return;
    }

    try {

        currentStream = await navigator.mediaDevices.getUserMedia({
            audio: true
        });

        let options = {};

        if (MediaRecorder.isTypeSupported("audio/webm;codecs=opus")) {
            options.mimeType = "audio/webm;codecs=opus";
        } else if (MediaRecorder.isTypeSupported("audio/webm")) {
            options.mimeType = "audio/webm";
        }

        mediaRecorder = new MediaRecorder(currentStream, options);

        audioChunks = [];

        mediaRecorder.onstart = function () {
            console.log("Recording started");
        };

        mediaRecorder.ondataavailable = function (e) {

            console.log("Chunk:", e.data.size);

            if (e.data && e.data.size > 0) {
                audioChunks.push(e.data);
            }
        };

        mediaRecorder.onerror = function (e) {
            console.error("Recorder Error:", e);
        };

        mediaRecorder.onstop = function () {

            console.log("Recorder stopped");

            clearInterval(recordingInterval);

            if (currentStream) {
                currentStream.getTracks().forEach(track => track.stop());
            }

            $("#record-btn").removeClass("d-none");
            $("#stop-btn").addClass("d-none");
            $("#recording-time")
                .addClass("d-none")
                .text("🎤 Recording... 00:00");

            let mimeType = mediaRecorder.mimeType || "audio/webm";

            let blob = new Blob(audioChunks, {
                type: mimeType
            });

            console.log("Blob Size:", blob.size);
            console.log("Blob Type:", blob.type);

            if (blob.size === 0) {
                alert("Recording failed. Please try again.");
                return;
            }

            let extension = mimeType.includes("ogg") ? "ogg" : "webm";

            let formData = new FormData();

            formData.append(
                "attachment",
                blob,
                "voice." + extension
            );

            formData.append(
                "phone",
                $("input[name=phone]").val()
            );

            $.ajax({

                url: "{{ route('admin.whatsapp.sendAttachment') }}",

                type: "POST",

                data: formData,

                processData: false,

                contentType: false,

                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                beforeSend: function () {
                    console.log("Uploading voice...");
                },

                success: function (response) {

                    console.log("Upload Success", response);

                    appendMessage(response.message);

                },

                error: function (xhr) {

                    console.log("Upload Error");
                    console.log(xhr.status);
                    console.log(xhr.responseText);

                    alert("Unable to send voice message.");

                }

            });

        };

        // Generate chunks every second
        mediaRecorder.start(1000);

        $("#record-btn").addClass("d-none");
        $("#stop-btn").removeClass("d-none");
        $("#recording-time").removeClass("d-none");

        recordingSeconds = 0;

        $("#recording-time").text("🎤 Recording... 00:00");

        recordingInterval = setInterval(function () {

            recordingSeconds++;

            let min = String(Math.floor(recordingSeconds / 60)).padStart(2, "0");
            let sec = String(recordingSeconds % 60).padStart(2, "0");

            $("#recording-time").text(
                "🎤 Recording... " + min + ":" + sec
            );

        }, 1000);

    } catch (err) {

        console.error(err);

        alert("Microphone permission denied.");

    }

});


// =========================
// STOP RECORDING
// =========================
$(document).on("click", "#stop-btn", function () {

    console.log("Stop button clicked");

    if (!mediaRecorder) {
        console.log("MediaRecorder not found");
        return;
    }

    console.log("Recorder State:", mediaRecorder.state);

    if (mediaRecorder.state === "recording") {
        mediaRecorder.stop();
    }

});



$(document).on('click', '.claim-chat', function (e) {

    e.preventDefault();
    e.stopPropagation();

    let button = $(this);
    let id = button.data('id');

    $.ajax({

        url: "/admin/whatsapp/claim-chat/" + id,

        type: "POST",

        data: {
            _token: $('meta[name="csrf-token"]').attr('content')
        },

        success: function (res) {

            if (res.success) {

                button.replaceWith(
                    '<span class="badge bg-success">Mine</span>'
                );

            } else {

                alert(res.message);

            }

        },

        error: function () {

            alert("Something went wrong.");

        }

    });

});

$(document).on('click', '.transfer-chat', function(e){

    e.preventDefault();

    let id = $(this).data('id');

    $('#transferForm').attr(
        'action',
        '/admin/whatsapp/transfer-chat/' + id
    );

    $('#transferModal').modal('show');

});

$('#transferNow').click(function(){

    let id = $('#transfer_chat_id').val();

    let admin = $('#transfer_admin').val();

    if(admin == ''){

        alert('Please select an admin.');

        return;

    }

    $.ajax({

        url:'/admin/whatsapp/transfer-chat/'+id,

        type:'POST',

        data:{
            admin_id:admin,
            _token:$('meta[name="csrf-token"]').attr('content')
        },

        success:function(res){

            if(res.success){

                $('#transferModal').modal('hide');

                location.reload();

            }

        },

        error:function(xhr){

            alert(xhr.responseJSON.message);

        }

    });

});

</script>

@endif

<script>


$(document).on('click', '.accept-transfer', function (e) {

    e.preventDefault();
    e.stopPropagation();

    let id = $(this).data('id');

    console.log("Transfer ID:", id);

    $.ajax({

        url: '/admin/whatsapp/transfer/' + id + '/accept',

        type: 'POST',

        data: {
            _token: $('meta[name="csrf-token"]').attr('content')
        },

        beforeSend: function () {
            console.log("Sending request...");
        },

        success: function (res) {
            console.log("SUCCESS:", res);

            if(res.success){
                location.reload();
            }
        },

        error: function(xhr){
            console.log("ERROR");
            console.log(xhr.status);
            console.log(xhr.responseText);
        }

    });

});

$(document).on('click', '.reject-transfer', function (e) {

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    let id = $(this).data('id');

    $.ajax({

        url: '/admin/whatsapp/transfer/' + id + '/reject',

        type: 'POST',

        data: {
            _token: $('meta[name="csrf-token"]').attr('content')
        },

        success: function (res) {

            if (res.success) {

                location.reload();

            }

        }

    });

    return false;

});

$(document).on('click', '.claim-chat', function (e) {
    // your existing claim code
});

$(document).on('click', '.transfer-chat', function (e) {
    // your existing transfer modal code
});

</script>

@endpush