@extends('Template::layouts.master')
@section('content')
    <div class="dashbord-body">
        <div class="container">
            <div class="row flex-wrap-reverse gy-4">
                <div class="col-xl-4 col-lg-5">
                    <div class="card custom--card h-100">
                        <div class="card-body">
                            <ul class="list-group list-group--custom">
                                <li class="list-group-item">
                                    <span class="caption"><i class="la la-globe"></i> @lang('Domain Name')</span>
                                    <strong class="details">{{ __($bid?->domain?->name ?? '') }}</strong>
                                </li>
                                <li class="list-group-item">
                                    <span class="caption"><i class="las la-money-bill"></i> @lang('Domain Price')</span>
                                    <strong class="details">{{ showAmount($bid?->domain?->price ?? '') }}</strong>
                                </li>
                                <li class="list-group-item">
                                    <span class="caption"><i class="lar la-user"></i> @lang('Seller Name')</span>
                                    <strong class="details">{{ __($bid?->domain?->user?->fullname ?? '') }}</strong>
                                </li>
                                <li class="list-group-item">
                                    <span class="caption"><i class="la la-user-circle"></i> @lang('Buyer Name')</span>
                                    <strong class="details">{{ __($bid?->user?->fullname ?? '') }}</strong>
                                </li>
                                <li class="list-group-item">
                                    <span class="caption">
                                        <i class="las la-spinner"></i> @lang('Bid Status')
                                    </span>

                                    @php
                                        echo $bid->statusText;
                                    @endphp
                                </li>
                            </ul>
                        </div>
                        @if ($bid->status == 0 && $bid?->domain?->user_id == auth()->id())
                            <div class="card-footer">
                                <button class="btn btn--base giveCredential" data-bid_id="{{ $bid->id }}" data-domain_id="{{ $bid->domain_id }}">@lang('I\'ve Sent Credentials')</button>
                            </div>
                        @elseif($bid->status == 2 && $bid->user_id == auth()->id())
                            <div class="card-footer">
                                <div class="d-flex align-items-center gap-2">
                                    <button class="btn btn--warning flex-grow-1 bidReport" data-bid_id="{{ $bid->id }}" data-domain_id="{{ $bid->domain_id }}">
                                        @lang('Report')
                                    </button>
                                    <button class="btn btn--base flex-grow-1 completeBid" data-bid_id="{{ $bid->id }}" data-domain_id="{{ $bid->domain_id }}">
                                        @lang('Completed')
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-lg-6 col-xxl-7">
                    <div class="chatbox">
                        <div class="chatbox-header">
                            <div class="chatbox-user">
                                <img class="chatbox-user__thumb" src="{{ getImage(getFilePath('userProfile') . '/' . $bid?->domain?->user?->image ?? '', getFileSize('userProfile')) }}" alt="">
                                <div class="chatbox-user__content">
                                    <h6 class="chatbox-user__name">{{ __($bid?->domain?->user?->fullname ?? '') }}
                                    </h6>
                                    <span class="chatbox-user__location">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin-icon lucide-map-pin">
                                            <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
                                            </path>
                                            <circle cx="12" cy="10" r="3"></circle>
                                        </svg>
                                        {{ __($bid?->domain?->user?->country_name ?? '') }}
                                    </span>
                                </div>
                            </div>
                            <button class="chatbox-refresh" type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-ccw-icon lucide-refresh-ccw">
                                    <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
                                    <path d="M3 3v5h5" />
                                    <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
                                    <path d="M16 16h5v5" />
                                </svg>
                                @lang('Refresh')
                            </button>
                        </div>
                        <div class="chatbox-body">
                            <ul class="chatbox-list" id="showMessage"></ul>
                        </div>
                        <div class="chatbox-footer">
                            <form class="chatbox-form" id="messageForm">
                                <div class="chatbox-form__body">
                                    <textarea class="chatbox-form__input messageVal" name="message" placeholder="@lang('Type your message here')..."></textarea>
                                </div>
                                <div class="chatbox-form__footer">
                                    <div class="chatbox-attach" id="attachmentPreview"></div>
                                    <label class="chatbox-form__upload" for="chatbox-file">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus">
                                            <path d="M5 12h14" />
                                            <path d="M12 5v14" />
                                        </svg>
                                        <input class="visually-hidden" type="file" name="attachments[]" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.txt" id="chatbox-file" multiple>

                                    </label>
                                    <button class="btn btn--sm btn--base" type="submit">
                                        @lang('Send Message')
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M21.5973 2.54257C21.1299 2.03918 20.397 1.85063 19.6968 1.78314C18.9611 1.71223 18.08 1.75939 17.1313 1.88382C15.2288 2.13337 12.9302 2.71102 10.7222 3.42176C8.51281 4.13295 6.35914 4.98865 4.74626 5.80847C3.94355 6.21648 3.24734 6.62932 2.74121 7.02586C2.48919 7.22331 2.25922 7.436 2.08623 7.66237C1.92123 7.87829 1.74764 8.18549 1.75002 8.55582C1.75629 9.5279 2.41829 10.2149 3.12327 10.676C3.84284 11.1467 4.77998 11.5014 5.71161 11.7792C6.65324 12.06 7.64346 12.2776 8.49473 12.454C8.55052 12.4655 8.66203 12.4886 8.79867 12.5168C9.31323 12.6231 9.57051 12.6763 9.81237 12.6039C10.0542 12.5315 10.2402 12.3456 10.612 11.9737L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31659 15.7071 9.70711L12.2745 13.1397C11.8954 13.5188 11.7059 13.7083 11.6342 13.9543C11.5624 14.2003 11.6203 14.4614 11.736 14.9837C12.1844 17.0084 12.5738 18.6815 12.9623 19.8071C13.1892 20.4645 13.4445 21.0336 13.7678 21.4533C14.1052 21.8913 14.5642 22.2222 15.1683 22.2489C15.5444 22.2655 15.8571 22.0938 16.0715 21.9344C16.2975 21.7666 16.51 21.5414 16.7071 21.2953C17.1031 20.8005 17.5192 20.1159 17.9332 19.3247C18.7652 17.7347 19.6462 15.6028 20.3917 13.4096C21.1368 11.2173 21.7577 8.9306 22.0568 7.0301C22.206 6.0823 22.2798 5.20207 22.2388 4.46477C22.1999 3.76556 22.0509 3.03106 21.5973 2.54257Z" fill="currentColor"></path>
                                        </svg>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal custom--modal fade" id="giveCredentialModal" tabindex="-1" aria-labelledby="transactionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="transactionModalLabel">@lang('Confirmation Alert!')</h6>
                    <button type="button" class="btn btn--close btn-soft--secondary " data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <form method="POST">
                    @csrf
                    <div class="modal-body">
                        <p class="text-center">@lang('Did you send all domain credentials?')</p>
                        <input type="hidden" name="domain_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn--danger btn--sm" data-bs-dismiss="modal">@lang('No')</button>
                        <button class="btn btn--base btn--sm">@lang('Yes')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal custom--modal fade" id="bidReportModal" tabindex="-1" aria-labelledby="transactionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="transactionModalLabel">@lang('Confirmation Alert!')</h5>
                    <button type="button" class="close btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <form method="POST">
                    @csrf
                    <div class="modal-body">
                        <h6 class="text-center">@lang('Are you sure to report against this bid?')</h6>
                        <input type="hidden" name="domain_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn--danger btn-sm" data-bs-dismiss="modal">@lang('No')</button>
                        <button class="btn btn--base btn-sm">@lang('Yes')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal custom--modal fade" id="completeBidModal" tabindex="-1" aria-labelledby="transactionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="transactionModalLabel">@lang('Confirmation Alert!')</h5>
                    <button type="button" class="close btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <form method="POST">
                    @csrf
                    <div class="modal-body">
                        <h6 class="text-center">@lang('Do you receive all credentials?')</h6>
                        <input type="hidden" name="domain_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn--danger btn-sm" data-bs-dismiss="modal">@lang('No')</button>
                        <button class="btn btn--base btn-sm">@lang('Yes')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('style')
    <style>
        .chat-message {
            max-height: 331px;
            overflow-y: scroll;
        }
    </style>
@endpush
@push('script')
    <script>
        "use strict";

        fetchConversation();

        function fetchConversation() {
            $.ajax({
                type: "GET",
                url: "{{ route('user.bid.conversation.show', $bid->id) }}",
                success: function(response) {
                    $('#showMessage').html(response);
                    scrollToBottom();
                }
            });
        }
        $("#messageForm").submit(function(e) {
            e.preventDefault();
            var formData = new FormData($(this)[0]);

            $.ajax({
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                },
                url: "{{ route('user.bid.conversation.store', [$bid->id, $bid->domain->id]) }}",
                method: "POST",
                data: formData,
                async: false,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        $('.messageVal').val('');
                        $('.chat-file-box').html('');
                        notify('success', response.success);
                        fetchConversation();
                        $('#attachmentPreview').empty();
                    } else {
                        notify('error', response.error);
                    }
                }
            });
        });

        $('.giveCredential').on('click', function() {
            var modal = $('#giveCredentialModal');
            modal.find('input[name="domain_id"]').val($(this).data('domain_id'));
            modal.find('form').attr('action', `{{ route('user.bid.credential', '') }}/${$(this).data('bid_id')}`);
            modal.modal('show');
        });

        $('.bidReport').on('click', function() {
            var modal = $('#bidReportModal');
            modal.find('input[name="domain_id"]').val($(this).data('domain_id'));
            modal.find('form').attr('action', `{{ route('user.bid.report', '') }}/${$(this).data('bid_id')}`);
            modal.modal('show');
        });

        $('.completeBid').on('click', function() {
            var modal = $('#completeBidModal');
            modal.find('input[name="domain_id"]').val($(this).data('domain_id'));
            modal.find('form').attr('action', `{{ route('user.bid.complete', '') }}/${$(this).data('bid_id')}`);
            modal.modal('show');
        });


        $('.chatbox-refresh').on('click', function() {
            const $btn = $(this);
            const $icon = $btn.find('svg');
            const $newIcon = $icon.clone(true);
            $icon.replaceWith($newIcon);
            $newIcon.addClass('rotate-once');

            fetchMessage();
        });

        let selectedFiles = [];

        $('#chatbox-file').on('change', function(e) {
            const files = Array.from(e.target.files);
            const preview = $('#attachmentPreview');

            for (let file of files) {
                if (selectedFiles.length >= 3) {
                    notify('error', 'Maximum 3 files can be uploaded');
                    break;
                }

                selectedFiles.push(file);

                const index = selectedFiles.length - 1;
                const ext = file.name.split('.').pop().toLowerCase();

                let item = $('<li class="chatbox-attach-item"></li>');

                if (['jpg', 'jpeg', 'png'].includes(ext)) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        item.append(`
                            <div class="chatbox-attach-item__thumb">
                                <img src="${e.target.result}" alt="">
                            </div>
                        `);
                    };
                    reader.readAsDataURL(file);
                } else {
                    item.append(`
                        <div class="chatbox-attach-item__thumb">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                                class="lucide lucide-file-icon lucide-file">
                                <path
                                    d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
                                <path d="M14 2v5a1 1 0 0 0 1 1h5" />
                            </svg>
                        </div>
                    `);
                }

                item.append(`
                    <button class="chatbox-attach-item__remove" type="button" data-index="${index}">
                        <i class="las la-times"></i>
                    </button>
                `);
                preview.append(item);
            }

            updateFileInput();
        });

        $(document).on('click', '.chatbox-attach-item__remove', function() {
            const index = $(this).data('index');

            selectedFiles.splice(index, 1);
            $(this).parent().remove();

            updateFileInput();
        });

        function updateFileInput() {
            const dataTransfer = new DataTransfer();
            selectedFiles.forEach(file => dataTransfer.items.add(file));
            document.getElementById('chatbox-file').files = dataTransfer.files;
        }

        function scrollToBottom() {
            var chatContainer = $('.chatbox-body');
            if (chatContainer.length) {

                chatContainer.animate({
                    scrollTop: chatContainer[0].scrollHeight
                }, 100);
            }
        }
    </script>
@endpush
