@extends('admin.layout.dashboard_master')

@section('content')
<main id="main" class="main">

    <div class="pagetitle">
        <h1>Dev Support Chat</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('american.plastic.admin.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item">Developer</li>
                <li class="breadcrumb-item active">Chat</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mt-3 mb-3">
                            <h5 class="card-title m-0">Live Developer Support</h5>
                            <span class="badge bg-success"><i class="bi bi-circle-fill small me-1"></i> System Online</span>
                        </div>

                        <!-- Chat Box Container -->
                        <div class="chat-container border rounded bg-light p-3 mb-3" id="chat-box" style="height: 500px; overflow-y: auto;">
                            
                            @forelse($messages as $msg)
                                @if($msg->sender_name === 'DEV')
                                    <!-- Dev Message (Left) -->
                                    <div class="d-flex flex-row justify-content-start mb-4">
                                        <div class="p-3 ms-3" style="border-radius: 15px; background-color: #213347; color: white;">
                                            <p class="small mb-1 fw-bold text-white-50">Developer support</p>
                                            <p class="mb-0">{{ $msg->message }}</p>
                                            @if($msg->file_path)
                                                <div class="mt-2 text-white">
                                                    <i class="bi bi-paperclip"></i>
                                                    <a href="{{ asset($msg->file_path) }}" target="_blank" class="text-white text-decoration-underline small">
                                                        {{ $msg->file_original_name }}
                                                    </a>
                                                </div>
                                            @endif
                                            <p class="small mb-0 text-white-50 mt-1" style="font-size: 0.70rem;">{{ $msg->created_at->format('M d, H:i A') }}</p>
                                        </div>
                                    </div>
                                @else
                                    <!-- System User/Admin Message (Right) -->
                                    <div class="d-flex flex-row justify-content-end mb-4">
                                        <div class="p-3 me-3 border" style="border-radius: 15px; background-color: #fbfbfb;">
                                            <p class="small mb-1 fw-bold text-muted">{{ $msg->sender_name }} (System User)</p>
                                            <p class="mb-0">{{ $msg->message }}</p>
                                            @if($msg->file_path)
                                                <div class="mt-2">
                                                    <i class="bi bi-paperclip"></i>
                                                    <a href="{{ asset($msg->file_path) }}" target="_blank" class="text-primary text-decoration-underline small">
                                                        {{ $msg->file_original_name }}
                                                    </a>
                                                </div>
                                            @endif
                                            <p class="small mb-0 text-muted mt-1 text-end" style="font-size: 0.70rem;">{{ $msg->created_at->format('M d, H:i A') }}</p>
                                        </div>
                                    </div>
                                @endif
                            @empty
                                <div class="text-center text-muted mt-5">
                                    <i class="bi bi-chat-dots fs-1"></i>
                                    <p class="mt-2">No messages yet. Start the conversation!</p>
                                </div>
                            @endforelse

                        </div>

                        <!-- Send Message Form -->
                        <form action="{{ route('admin.dev-chat.send') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label for="attachment" class="form-label small text-muted">Attach a file (optional)</label>
                                <input type="file" name="attachment" id="attachment" class="form-control form-control-sm">
                            </div>
                            <div class="input-group">
                                <input type="text" name="message" class="form-control" placeholder="Type your message here..." autofocus>
                                <button class="btn btn-primary" type="submit" style="background-color: #213347; border-color: #213347;">
                                    <i class="bi bi-send-fill text-white"></i> Send
                                </button>
                            </div>
                        </form>

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

</main>

<script>
    // Auto-scroll to the bottom of the chat box on page load
    document.addEventListener("DOMContentLoaded", function() {
        var chatBox = document.getElementById("chat-box");
        chatBox.scrollTop = chatBox.scrollHeight;
    });
</script>
@endsection