@extends('layouts.message')

@section('title')
   Click & Get
@endsection

@section('content')
<div class="py-5"></div>
<div class="container">
    <br>
    <br>
    <br>
    <br>
    <div class="messages-container">
        @if (session('message'))
            <div class="alert alert-success">
                {{ session('message') }}
                
            </div>
        @endif
        @foreach ($messages as $message)
            <div class="message">
                <div class="message-content">
                    @if ($message->user)
                        @if ($message->sender == $userId)
                            <span class="message-sender">{{ $message->user->name }}</span>:
                        @elseif ($message->recipient_id == $userId)
                            <span class="message-receiver">{{ $message->user->name }}</span>:
                        @endif
                    @else
                        @if ($message->sender == $userId)
                            <span class="message-sender">Unknown Sender</span>:
                        @elseif ($message->recipient_id == $userId)
                            <span class="message-receiver">Unknown Receiver</span>:
                        @endif
                    @endif
                    {{ $message->message }}
                </div>
            </div>
        @endforeach
    </div>
    <form action="/submitMessage" method="POST">
        @csrf
        <div class="row">
            <div class="col-md-6">
                <input type="hidden" id="user_id" name="user_id" value="{{ Auth::id() }}">
                <input type="hidden" id="sender" name="sender" value="{{ Auth::id() }}">
                <input type="hidden" id="name" name="name" value="{{ auth()->user()->name }}" required class="form-control">
                @if ($product && $product->user)
                    <input type="hidden" id="recipient_id" name="recipient_id" value="{{ $product->user->id }}">
                @else
                <input type="hidden" id="recipient_id" name="recipient_id" value="{{ $shopId }}">
                @endif
            </div>
            <div class="col-md-6">
                <input type="hidden" id="email" value="{{ auth()->user()->email }}" name="email" required class="form-control">
            </div>
        </div>
        <div class="row">
    <div class="col-md-12">
        <div class="md-form">
            <textarea id="message" name="message" required rows="2" class="form-control md-textarea">{{ old('message') }}</textarea>
            <label for="message">Message</label>
        </div>
    </div>
</div>

<script>
    // Load the previously input message from local storage and populate the textarea
    document.addEventListener("DOMContentLoaded", function () {
        const messageInput = document.getElementById("message");
        const storedMessage = localStorage.getItem("storedMessage");

        if (storedMessage) {
            messageInput.value = storedMessage;
        }

        // Save the input message to local storage whenever there's a change
        messageInput.addEventListener("input", function () {
            localStorage.setItem("storedMessage", messageInput.value);
        });
    });
</script>
        <div class="text-center text-md-left">
            <button class="w-100 p-2 btn btn-outline-primary" type="submit">SEND MESSAGE</button>
        </div>
    </form>
</div>
<div class="py-5"></div>

<meta http-equiv="refresh" content="{{ $refreshInterval }}">


<script>
    // Set the refresh interval for auto-refresh after form submission
    const refreshIntervalAfterSubmit = 5; // 5 seconds

    document.addEventListener("DOMContentLoaded", function () {
        const messageForm = document.getElementById("messageForm");
        const messageTextarea = document.getElementById("message");
        
        // Retrieve and set the entered text from local storage
        const storedMessage = localStorage.getItem("message");
        if (storedMessage) {
            messageTextarea.value = storedMessage;
        }

        messageForm.addEventListener("submit", function (event) {
            // Prevent the default form submission behavior
            event.preventDefault();

            // Store the entered text in local storage
            localStorage.setItem("message", messageTextarea.value);

            // Submit the form using AJAX
            fetch('/submitMessage', {
                method: 'POST',
                body: new FormData(messageForm),
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Clear the stored message
                    localStorage.removeItem("message");

                    // Reload the page after a short delay
                    setTimeout(() => {
                        location.reload();
                    }, refreshIntervalAfterSubmit * 1000);
                } else {
                    console.error('Message submission failed:', data.status);
                }
            })
            .catch(error => {
                console.error('Error submitting message:', error);
            });
        });
    });
</script>


@endsection