@extends('Admin.layout.app')

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

@section('content')
<div class="container-fluid">

    <div class="row">

        <!-- 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:700px;overflow-y:auto;">

@foreach($customers as $customer)

<a href="{{ route('admin.whatsapp.chat',$customer->phone) }}"
   class="text-decoration-none text-dark">

<div class="customer-item p-3 border-bottom
{{ isset($selected) && $selected->phone == $customer->phone ? 'selected-chat' : '' }}">

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

        <!-- 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>

</div>

</a>

@endforeach

</div>

        </div>

        <!-- Chat -->
        <!-- Chat -->
<div class="col-md-9 p-0 bg-light">

@if(isset($selected))

<!-- Chat Header -->
        <div class="bg-white border-bottom px-4 py-3 shadow-sm">

    <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>

        </div>

<!-- Messages -->
 <div id="chat-box"
     style="
        height:620px;
        overflow-y:auto;
        padding:20px;
        background-image:url('{{ asset('/storage/assets/images/whatsapp-bg.png') }}');
        background-repeat:repeat;
        background-size:350px;
">


      @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($msg->type == 'image')
        
                  <img src="{{ asset($msg->media) }}"
                  class="img-fluid rounded chat-image"
                  style="max-width:150px;cursor:pointer;"
                  data-bs-toggle="modal"
                  data-bs-target="#imageModal"
                  data-image="{{ asset($msg->media) }}">
               
               @elseif($msg->type == 'audio')
               
                   <audio controls preload="metadata">
                       <source src="{{ asset($msg->media) }}">
                       Your browser does not support the audio element.
                   </audio>
               
               @elseif($msg->type == 'video')
               
                   <video controls style="max-width:250px;">
                       <source src="{{ asset($msg->media) }}">
                   </video>
               
               @elseif($msg->type == 'document')
               
                   <a href="{{ asset($msg->media) }}" 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($msg->media) }}"
                         class="img-fluid rounded chat-image"
                         style="max-width:150px;cursor:pointer;"
                         data-bs-toggle="modal"
                         data-bs-target="#imageModal"
                         data-image="{{ asset($msg->media) }}">
               
                         @elseif($msg->type == 'audio')
                         
                             <audio controls preload="metadata">
                                 <source src="{{ asset($msg->media) }}">
                                 Your browser does not support the audio element.
                             </audio>
                         
                         @elseif($msg->type == 'video')
                         
                             <video controls style="max-width:250px;">
                                 <source src="{{ asset($msg->media) }}">
                             </video>
                         
                         @elseif($msg->type == 'document')
                         
                             <a href="{{ asset($msg->media) }}" 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">

    <audio id="notificationSound" preload="auto">
        <source src="{{ asset('/storage/assets/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>

@endsection

@push('js')

@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);

$(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;
let audioChunks = [];
let recordingInterval;
let recordingSeconds = 0;

// Start Recording
$("#record-btn").click(async function () {

    try {

        const stream = 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(stream, options);

        audioChunks = [];

        mediaRecorder.ondataavailable = function (e) {
            if (e.data.size > 0) {
                audioChunks.push(e.data);
            }
        };

        mediaRecorder.start();

        $("#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);

        mediaRecorder.onstop = function () {

            clearInterval(recordingInterval);

            stream.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 formData = new FormData();

console.log("Recorder MIME:", mediaRecorder.mimeType);

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

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

console.log("Blob MIME:", blob.type);
console.log("Blob:", blob);
             
             let extension = mimeType.includes("ogg") ? "ogg" : "webm";
             
             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,

                success: function (response) {

                    appendMessage(response.message);

                },

                error: function (xhr) {

    console.log("Status:", xhr.status);
    console.log("Response:", xhr.responseText);

}

            });

        };

    } catch (err) {

        alert("Microphone permission denied.");

        console.log(err);

    }

});

// Stop Recording
$("#stop-btn").click(function () {

    if (mediaRecorder && mediaRecorder.state === "recording") {

        mediaRecorder.stop();

    }

});
</script>

@endif

@endpush