@extends('admin.layouts.app')
@section('panel')
    <div class="row justify-content-center mt-4">
        <div class="col-xl-4">
            <div class="card b-radius--5 mb-4">
                <div class="card-body">
                    <h6 class="d-flex justify-content-between mb-3">
                        @lang('Payment') #{{ $payment->trx }}
                        @php
                            echo $payment->statusBadge();
                        @endphp
                    </h6>
                    <ul class="list-group list-group">

                        @if ($payment->status == 3)
                            <li class="list-group-item text--danger fw-bold d-flex justify-content-between">
                                @lang('Reported by')
                                <a class="text--blue" href="{{ route('admin.users.detail', $payment->from_user_id) }}"> @lang('@'){{ $payment->fromUser->username }}</a>
                            </li>
                        @endif

                        @if ($payment->status == 4)
                            <li class="list-group-item text--danger fw-bold d-flex justify-content-between">
                                @lang('Reported by')
                                <a class="text--cyan" href="{{ route('admin.users.detail', $payment->to_user_id) }}"> @lang('@'){{ $payment->toUser->username }}</a>
                            </li>
                        @endif

                        <li class="list-group-item d-flex justify-content-center fw-bold">
                            @lang('Payment Info')
                        </li>

                        <li class="list-group-item d-flex justify-content-between">
                            @lang('Amount')
                            <span class="fw-bold">{{ showAmount($payment->amount) }} {{ __($payment->investment->currency->code) }}</span>
                        </li>

                        <li class="list-group-item d-flex justify-content-between">
                            @lang('Merged At')
                            <span class="fw-bold">{{ $payment->created_at->diffForHumans() }}</span>
                        </li>

                        <li class="list-group-item d-flex justify-content-between">
                            @lang('Sender')
                            <span class="fw-bold">
                                <a class="text--blue" href="{{ route('admin.users.detail', $payment->from_user_id) }}">@lang('@'){{ $payment->fromUser->username }}</a>
                            </span>
                        </li>

                        <li class="list-group-item d-flex justify-content-between">
                            @lang('Receiver')
                            <span class="fw-bold">
                                <a class="text--cyan" href="{{ route('admin.users.detail', $payment->to_user_id) }}"> @lang('@'){{ $payment->toUser->username }}</a>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card b-radius--5 mb-4">
                <div class="card-body">
                    <ul class="list-group list-group mt-3">
                        <li class="list-group-item d-flex justify-content-center fw-bold">
                            @lang('Proof')
                        </li>

                        @if ($payment->status && $payment->info)
                            <li class="list-group-item">
                                <p>
                                    {{ $payment->info }}
                                </p>
                                <a href="{{ getImage(getFilePath('payment') . '/' . @$payment->image, getFileSize('payment')) }}" download="{{ $payment->image }}"> @lang('Attachment')</a>
                            </li>
                        @endif

                        @if (!$payment->status)
                            <li class="list-group-item d-flex justify-content-between">
                                @lang('Time Left')
                                <span class="fw-bold">
                                    @if ($payment->deadline > now())
                                        {{ $payment->deadline->diff(now())->format('%H:%I:%S') }}
                                    @else
                                        <span class="text-danger">@lang('Expired')</span>
                                    @endif
                                </span>
                            </li>
                        @elseif($payment->status == 2)
                            @if ($payment->confirmation_deadline > now())
                                <li class="list-group-item d-flex justify-content-between">
                                    @lang('Confirmation Countdown')
                                    <span class="fw-bold">
                                        {{ $payment->confirmation_deadline->diff(now())->format('%H:%I:%S') }}
                                    </span>
                                </li>
                            @else
                                <li class="list-group-item d-flex justify-content-between">
                                    @lang('Confirmation time')
                                    <span class="fw-bold text--danger">
                                        @lang('Expired')
                                    </span>
                                </li>
                            @endif
                        @elseif($payment->status == 5)
                            <li class="list-group-item text--danger fw-bold d-flex justify-content-end">
                                @lang('This payment is rejected.')
                            </li>
                        @elseif($payment->status == 1)
                            <li class="list-group-item text--success fw-bold d-flex justify-content-end">
                                @lang('Payment Completed')
                            </li>
                        @endif

                    </ul>
                </div>
            </div>

            @if ($payment->status == 3 || $payment->status == 4)
                <div class="card b-radius--5 mb-4">
                    <div class="card-body">
                        <ul class="list-group list-group mt-3">

                            <li class="list-group-item d-flex justify-content-center fw-bold">
                                @lang('Take Action')
                            </li>

                            <li class="list-group-item d-flex flex-wrap gap-3 p-3 text-center">

                                <button class="btn inFavourOfReceiver bg--cyan flex-fill text-white">
                                    @lang('In Favour of Receiver')
                                </button>

                                <button class="btn inFavourOfSender bg--blue flex-fill text-white">
                                    @lang('In Favour of Sender')
                                </button>

                                <button class="btn bg--warning setBackAction flex-fill text-white">
                                    @lang('Set Back to Initial Stage')
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            @endif
        </div>
        <div class="col-xl-8">
            <div class="col-12">
                <div class="card b-radius--5 mb-4">
                    <div class="card-body">
                        <h5 class="card-title text-center">@lang('Chat with ') {{ __($payment->toUser->username) }}</h5>
                        <div class="message-box payment-msg-container rounded">
                            @forelse ($payment->chats as $chat)
                                <div class="payment-chat single-message @if ($chat->user_id == 0) payment-chat-right @else payment-chat-left @endif mb-4 rounded">
                                    <div class="div">
                                        <h6 class="title">
                                            @if ($chat->user_id == 0)
                                                <span class="admin-user">@lang('Admin')</span>
                                            @else
                                                @if ($chat->user_id == $payment->from_user_id)
                                                    <span class="from-user">{{ __($chat->user->username) }}</span>
                                                @else
                                                    <span class="to-user">{{ __($chat->user->username) }}</span>
                                                @endif
                                            @endif
                                        </h6>
                                        <div class="chat-msg">
                                            {{ $chat->message }}
                                            @if ($chat->file)
                                                <div class="d-flex justify-content-end">
                                                    <a class="text--primary mt-2" href="{{ route('admin.download.attachment', encrypt(getFilePath('conversation') . '/' . $chat->file)) }}"><i class="las la-file"></i> @lang('Attachment')</a>
                                                </div>
                                            @endif
                                        </div>
                                        <p class="time-text">{{ $chat->created_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                            @empty
                                <div class="single-message mb-4 rounded">
                                    <span class="d-flex justify-content-center">
                                        {{ __($emptyMessage) }}
                                    </span>
                                </div>
                            @endforelse
                        </div>
                        @if ($payment->status == 3 || $payment->status == 4)
                            <form class="chat-from" action="{{ route('admin.payment.send.message', $payment->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <textarea class="form-control" id="" name="message" placeholder="@lang('Say something...')"></textarea>
                                <div class="d-flex justify-content-between message-bottom mt-4 flex-wrap">
                                    <div class="trade-chat-file-upload">
                                        <input class="custom-file form-control form--control" id="file" name="file" type="file" accept=".jpg , .png, ,jpeg .pdf">
                                    </div>
                                    <div class="chatbox-send-part">
                                        <button class="btn btn--primary btn-block message-btn" type="submit"> <i class="fas fa-paper-plane"></i> @lang('Send')</button>
                                    </div>
                                </div>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($payment->status == 3 || $payment->status == 4)
        <div class="modal fade" id="actionModal" role="dialog" aria-labelledby="actionModalLabel" aria-hidden="true" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="actionModalLabel">@lang('Confirmation Alert!')</h4>
                        <button class="close" data-bs-dismiss="modal" type="button" aria-label="Close">
                            <i class="las la-times"></i>
                        </button>
                    </div>
                    <form action="{{ route('admin.payment.action', $payment->id) }}" method="POST">
                        @csrf
                        <input name="type" type="hidden">
                        <div class="modal-body">
                            <p class="text-muted actionText"></p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn--dark" data-bs-dismiss="modal" type="button">@lang('No')</button>
                            <button class="btn btn--primary" type="submit">@lang('Yes')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('breadcrumb-plugins')
    <x-back route="{{ route('admin.investment.detail', $payment->investment_id) }}" />
@endpush
@push('script')
    <script>
        "use strict";
        (function($) {
            let modal = $('#actionModal');

            $('.setBackAction').on('click', function() {
                modal.find('.actionText').text(`@lang('Are you sure to set back to initial stage?')`);
                modal.find('[name=type]').val('setBackToInitialStage');
                modal.modal('show');
            });

            $('.inFavourOfSender').on('click', function() {
                modal.find('.actionText').text(`@lang('Are you sure to take action in favour of receiver?')`);
                modal.find('[name=type]').val('inFavourOfSender');
                modal.modal('show');
            });

            $('.inFavourOfReceiver').on('click', function() {
                modal.find('.actionText').text(`@lang('Are you sure to take action in favour of sender?')`);
                modal.find('[name=type]').val('inFavourOfReceiver');
                modal.modal('show');
            });

            var chatWindow = $('.payment-msg-container');
            chatWindow.scrollTop(chatWindow[0].scrollHeight);

        })(jQuery);
    </script>
@endpush

@push('style')
    <style>
        .badge {
            line-height: 16px;
            height: 22px;
        }
    </style>
@endpush
