@extends("website.service-providers.layouts.layout")
@section('title',"Services")
@section("body")
<section class="banner-services">
        <img class="banner-background-ellipse" src="{{ asset('webAssets/assets/images/banner-bg-img.png') }}" alt="">
</section>

    <!--- Breadcrumbs section -->

    <section class="services-breadcrumb-section dashboard-breadcrumb">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                    <li class="breadcrumb-item active" aria-current="page">Profile Info</li>
                </ol>
            </nav>

        </div>
    </section>


    <!-- Main section started -->

    <section class="dashboard-main">
        <div class="container">
            <div class="row">
                @include("website.service-providers.includes.sidebar")
                @include("website.layouts.modal")                
              
                <div class="main-content">
                <div class="main-content-wrapper lg-width arnette-pro">
                    <div id="chatBlock" class="arnette-chat-block">
                        <div class="chat-content" id="chatContent">
                            <div class="chat-header">
                                <button class="back-button" onclick="closeChat()">
                                    Back
                                </button>

               
                                <img src="{{ url('webAssets/assets/images/123.png') }}" alt="profile" />
                                <div class="info">
                                    <span class="user" id="chatHeaderUser">{{$provider->first_name}} {{$provider->last_name}}</span>
                                    <span class="time">Active</span>
                                </div>
                            </div>
                            <div class="message-wrap">
                                <div class="message-list you">
                                    <div class="msg">
                                        
                                    </div>
                                </div>
                                <div class="message-list me">
                                    <div class="msg">
                                      
                                    </div>
                                </div>
                            </div>
                            <div class="message-footer me-0 ms-0">
                                <div class="custom-file-input upload">
                                    <label for="fileInput" class="custom-file-label">
                                        <img class="attachment-icon" src="{{ url('webAssets/assets/images/attachment.png') }}" />
                                    </label>
                                    <input type="file" id="fileInput" accept="image/*">
                                    <div class="image-wrapper-message">
                                        <div class="img-container"></div>
                                        <textarea id="textInput" placeholder="Enter text and image will be displayed here..."></textarea>
                                        <div id="imageDisplay" class="image-display"></div>
                                    </div>
                                    <button class="btn btn-primary" id="submitButton" type="button">
                                        <img class="send-icon" src="{{ url('webAssets/assets/images/send-icon2.svg') }}" />
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
        </div>
    </section>
@endsection
@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif

<script>
document.addEventListener("DOMContentLoaded", function() {
    const checkbox = document.getElementById("paymentCheck");
    const hiddenInput = document.querySelector('input[name="isCardSavePermanent"]');

    checkbox.addEventListener("change", function() {
        hiddenInput.value = this.checked ? "1" : "0";
    });
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.tiny.cloud/1/API_KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js"
    integrity="sha512-luMnTJZ7oEchNDZAtQhgjomP1eZefnl82ruTH/3Oj/Yu5qYtwL7+dVRccACS/Snp1lFXq188XFipHKYE75IaQQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

document.addEventListener('DOMContentLoaded', () => {
    const socket = io('https://php.stagingsdei.com:7006', { reconnection: false });

    let socketId;
    let senderId = {{ $provider->id }}; // Example senderId
    let receiverId = 0; // Example receiverId
    let senderType = "provider"; // Example senderType
    let receiverType = "admin"; // Example receiverType
    let roomId;
    let roomname;

    socket.on("connection", (data) => {
        socketId = data?.socketId;
    });

    const dataForRoom = {
        username: "{{ $provider->first_name }} {{ $provider->last_name }}",
        user_from: senderId,
        user_to: receiverId,
        user_from_type: senderType,
        user_to_type: receiverType
    };
    socket.emit("join room", dataForRoom);

    socket.on("chat message", (data) => {
        displayMessage(data);
    });

    socket.emit("old chat", {
        user_from: senderId,
        user_to: receiverId,
        user_from_type: senderType,
        user_to_type: receiverType
    });

    socket.on('send data', (data) => {
        roomId = data.id;
        roomname = data.roomname;
    });

    socket.on("old chat response", (data) => {
        if (data.status) {
            dMessage(data, senderId);
        }
    });

    const submitButton = document.querySelector('#submitButton');

    if (submitButton) {
        submitButton.addEventListener('click', showConfirmationModal);
    }

    function showConfirmationModal(event) {
        event.preventDefault();
        const messageBody = {
            value: document.getElementById("textInput").value,
            user: "userName",
            room: roomname,
            user_from: senderId,
            user_to: receiverId,
            socket: roomId,
            user_from_type: senderType,
            user_to_type: receiverType
        };
        socket.emit("chat message", messageBody);
        document.getElementById("textInput").value = "";
    }

    function dMessage(data, idd) {
        const messagesContainer = document.querySelector(".message-wrap");
        messagesContainer.innerHTML = '';

        if (!data.status) return;

        for (let i = 0; i < data.data.length; i++) {
            const message = data.data[i];
            const authorClass = message.user_from == idd ? "me" : "you";

            const messageDiv = document.createElement("div");
            messageDiv.className = `message-list ${authorClass}`;

            const messageContent = document.createElement("div");
            messageContent.className = "msg";
            messageContent.innerText = message.message;

            const timeP = document.createElement("p");
            timeP.className = "time";
            timeP.innerText = moment().format("hh:mm A");

            messageDiv.appendChild(messageContent);
            messageDiv.appendChild(timeP);
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
            
        }

 
    }

    function displayMessage(data) {
        const messagesContainer = document.querySelector(".message-wrap");
        const authorClass = data.data.user_from == senderId ? "me" : "you";

        const messageDiv = document.createElement("div");
        messageDiv.className = `message-list ${authorClass}`;

        const messageContent = document.createElement("div");
        messageContent.className = "msg";
        messageContent.innerText = data.data.value;

        const timeP = document.createElement("p");
        timeP.className = "time";
        timeP.innerText = moment().format("hh:mm A");

        messageDiv.appendChild(messageContent);
        messageDiv.appendChild(timeP);
        messagesContainer.appendChild(messageDiv);

        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
});

</script>




<script>
function validateCvv(input) {

if (input.value.length > 3) {
    input.value = input.value.slice(0, 3);
}
}

// Postal Code

function validateNumber(input) {

if (input.value.length > 5) {
    input.value = input.value.slice(0, 5);
}
}


   const input = document.getElementById('formattedInput');

input.addEventListener('input', function () {
    let value = this.value.replace(/\D/g, ''); // Remove any non-digit characters
    if (value.length > 6) {
        value = value.slice(0, 6); // Limit to 6 digits total
    }

    if (value.length > 2) {
        value = value.slice(0, 2) + '/' + value.slice(2);
    }

    this.value = value;
});

// Prevent non-numeric characters during keypress, allowing slash at correct position
input.addEventListener('keypress', function (e) {
    if (!/\d/.test(e.key)) {
        e.preventDefault();
    }
});

// Prevent pasting non-numeric characters
input.addEventListener('paste', function (e) {
    const pasteData = e.clipboardData.getData('text');
    if (!/^\d+$/.test(pasteData)) {
        e.preventDefault();
    }
});

document.querySelector('form').addEventListener('submit', function(e) {
    if (!/^\d{2}\/\d{4}$/.test(input.value)) {
        e.preventDefault();
        alert("Please enter a value in the format 99/9999.");
        input.focus();
    }
});
</script>