@extends('layouts.customer_template')

@section('title')
    Bitbance Support
@endsection

@section('style')

    <link rel="stylesheet" href="{{asset('customer/assets/css/support.css')}}" />
    <link rel="stylesheet" href="{{asset('customer/assets/css/support-responsive.css')}}" />

    <style>
        .chat-container {
            max-width: 700px;
            margin: auto;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;

        }
        .chat-box {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 400px;
            overflow-y: auto;
            padding: 10px;
        }
        .message {
            max-width: 70%;
            padding: 10px;
            border-radius: 10px;
            font-size: 14px;
            line-height: 1.4;
            position: relative;
            /* Break long words */
            word-break: break-word;
            overflow-wrap: break-word;
        }
        .customer {

            align-self: flex-end;
            text-align: right;
            border: 1px solid;
        }
        .reply {
            border: 1px solid #ddd;
            align-self: flex-start;
            text-align: left;
        }
        .message-time {
            font-size: 12px;
            color: #d1d2d4;
            margin-top: 5px;
        }
        .request-form{
            height:auto;
            min-height:450px;
        }

    </style>




@endsection

@section('header-menu')
    <div class="header-menu">
        <button class="btn-main" id="toggleRequestForm2">My Request</button>
        <button class="btn-main" id="toggleRequestForm">Create Request</button>
        <a href="{{route('faqs')}}">
            <button class="btn-main">FAQs</button>
        </a>
    </div>
@endsection

@section('content')


    <div class="container">

        <div class="content-section" style="min-height: 100vh !important">

            <div class="main-content">
                <h4 class="text-center">You don't have any open request</h4>
                <p>
                    If Your have any open request you might <br />
                    find answer in our FAQ section
                </p>
                <button class="btn-main" id="toggleRequestFormBtn">
                    Create Request
                </button>
                @if (count($errors) > 0)

                    <div class = "alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if (session('success'))
                    <div class="alert alert-success" id="successMessage">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger" id="errorMessage">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                {{--@if (session('status'))
                    <div class="alert alert-success">
                        {{ session('status') }}
                    </div>
                @endif
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif--}}
            </div>
            <div class="request-form" style="transform: none" id="requestForm">
                <form method="post" action="{{url('send_message')}}" enctype="multipart/form-data">
                    @csrf
                <div class="input-section">
                    <label for="message">Your message...</label>
                    <textarea name="message" id="message" cols="5" rows="3" placeholder=""></textarea>
                </div>
                <div class="buttons">
{{--                    <button class="btn-main-2 py-5">Upload documents</button>--}}
                    <input class="btn-main-2 py-5" type="file" name="document" id="document">
                    <button type="submit" class="btn-main-2 h-short py-3">
                        Confirm & send request
                    </button>
                </div>
                </form>
            </div>

            <div class="request-form" style="position: absolute; display: none" id="requestForm2">

                <div class="chat-container">
                    <b class="text-center d-block">Messages All</b>
                    <div class="chat-box">
                        @foreach ($messages as $message)
                            <!-- Customer Message (Right) -->
                            <div class="message customer">
                                <strong>You:</strong> {{ $message->message }}
                                <div class="message-time">{{ $message->created_at->format('d-m-Y h:i A') }}</div>
                            </div>

                            <!-- Replies (Left) -->
                            @foreach ($message->replies as $reply)
                                <div class="message reply">
                                    <strong>Support:</strong> {{ $reply->message }}
                                    <div class="message-time">{{ $reply->created_at->format('d-m-Y h:i A') }}</div>
                                </div>
                            @endforeach
                        @endforeach
                    </div>
                </div>

                {{--<div class="chat-container">
                    <b class="text-center">Messages All</b>
                    <div class="chat-box">
                        @foreach ($messages as $message)
                            <!-- Customer Message (Right) -->
                            <div class="message customer">
                                <strong>You:</strong> {{ $message->message }}
                                <div class="message-time">{{ $message->created_at->format('h:i A') }}</div>
                            </div>

                            <!-- Replies (Left) -->
                            @foreach ($message->replies as $reply)
                                <div class="message reply">
                                    <strong>Support:</strong> {{ $reply->message }}
                                    <div class="message-time">{{ $reply->created_at->format('h:i A') }}</div>
                                </div>
                            @endforeach
                        @endforeach
                    </div>
                </div>--}}

            </div>
        </div>
        @include('layouts.includes.footer')
    </div>

@endsection


@section('script')

    {{--<script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
        integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>--}}

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById("requestForm").style.display = "none";
        });

        document
            .getElementById("toggleRequestForm")
            .addEventListener("click", function () {
                const requestForm2 = document.getElementById("requestForm2");
                requestForm2.style.display = "none";
                const requestForm = document.getElementById("requestForm");
                requestForm.style.display =
                    requestForm.style.display === "none" ? "block" : "none";
            });
        document
            .getElementById("toggleRequestFormBtn")
            .addEventListener("click", function () {
                const requestForm2 = document.getElementById("requestForm2");
                requestForm2.style.display = "none";
                const requestForm = document.getElementById("requestForm");
                requestForm.style.display =
                    requestForm.style.display === "none" ? "block" : "none";
            });

        document
            .getElementById("toggleRequestForm2")
            .addEventListener("click", function () {
                const requestForm = document.getElementById("requestForm");
                requestForm.style.display = "none";
                const requestForm2 = document.getElementById("requestForm2");
                requestForm2.style.display =
                    requestForm2.style.display === "none" ? "block" : "none";
            });

        function toggleSidebar() {
            var sidebar = document.getElementById("sm-sidebar");
            var burgerMenu = document.querySelector(".burger-menu");

            if (sidebar.style.left === "0px") {
                sidebar.style.left = "-40%";
                burgerMenu.innerHTML = "&#9776;";
            } else {
                sidebar.style.left = "0px";
            }
        }
    </script>

    <script> window.chtlConfig = { chatbotId: "2974684918" } </script>
    <script async data-id="2974684918" id="chatling-embed-script" type="text/javascript" src="https://chatling.ai/js/embed.js"></script>
@endsection