@extends($activeTemplate . 'layouts.master_without_menu')
@section('content')
    @php
        $profileImage = fileManager()->userProfile();
    @endphp

    <div class="row">
        <div class="col-lg-12 mb-4">
            <h2>
                @if ($ad->type == 1)
                    @lang('Sell')
                @else
                    @lang('Buy')
                @endif
                {{ __($ad->crypto->name) }} @lang('using')
                {{ __($ad->fiatGateway->name) }} @lang('with') {{ __($ad->fiat->name) }}
                ({{ __($ad->fiat->code) }})
            </h2>

            <p class="mt-2">
                <a class="text--base" href="{{ route('public.profile', $ad->user->username) }}">{{ __($ad->user->username) }}</a> @lang('wishes to')
                @if ($ad->type == 1)
                    @lang('buy') {{ __($ad->crypto->name) }} @lang('from')
                @else
                    @lang('sell') {{ __($ad->crypto->to) }} @lang('to')
                @endif
                @lang('you').
            </p>
        </div>

        <div class="col-lg-7">
            <ul class="trade-request-details-list">
                <li>
                    <span class="caption">@lang('Rate')</span>
                    <span class="value">{{ getRate($ad) }} {{ __($ad->fiat->code) }} /{{ __($ad->crypto->code) }}</span>
                </li>
                <li>
                    <span class="caption">@lang('Payment Method')</span>
                    <span class="value">{{ __($ad->fiatGateway->name) }}</span>
                </li>
                <li>
                    <span class="caption">@lang('User')</span>
                    <span class="value">{{ __($ad->user->username) }}</span>
                </li>
                <li>
                    <span class="caption">@lang('Trade Limits')</span>
                    <span class="value">{{ showAmount($ad->min) }} - {{ showAmount($maxLimit) }}
                        {{ __($ad->fiat->code) }}</span>
                </li>
                <li>
                    <span class="caption">@lang('Payment Window')</span>
                    <span class="value">{{ __($ad->window) }} (@lang('minutes'))</span>
                </li>
                <li>
                    <span class="caption">@lang('Avg. Trade Speed')</span>
                    <span class="value">{{ avgTradeSpeed($ad) }}</span>
                </li>
            </ul><!-- trade-request-details-list end -->

            <form action="{{ route('user.trade.request.store', $ad->id) }}" class="trade-request-form mt-5" method="POST">
                @csrf
                <h3 class="mb-3 text-center">@lang('How much you wish to')
                    @if ($ad->type == 1)
                        @lang('sell')?
                    @else
                        @lang('buy')?
                    @endif
                </h3>
                <div class="row">
                    <div class="col-xl-6">
                        <div class="form-group">
                            <label>@lang('I will pay')</label>
                            <div class="input-group">
                                <input aria-describedby="payment1" autocomplete="off" class="form-control form--control" id="amount" name="amount" placeholder="0.00" required step="any" type="number">
                                <span class="input-group-text bg--base text-white border-0" id="payment1">{{ __($ad->fiat->code) }}</span>
                            </div>
                            <small class="text-danger message"></small>
                        </div>
                    </div>

                    <div class="col-xl-6">
                        <div class="form-group">
                            <label>@lang('And receive')</label>
                            <div class="input-group">
                                <input aria-describedby="payment2" autocomplete="off" class="form-control form--control" id="final-amount" placeholder="0.00" step="any" type="number">
                                <span class="input-group-text bg--base text-white border-0" id="payment2">{{ __($ad->crypto->code) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <textarea class="form--control mt-3" name="details" placeholder="@lang('Write your contact message and other information for the trade here')..." required></textarea>
                            <small class="text--danger"><i class="fas fa-info"></i> @lang('Remember to write about your convenient payment methods in the message').
                            </small>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button class="btn btn--base-two w-100" type="submit">@lang('Send Trade Request')</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-lg-5 pl-xl-5 mt-lg-0 mt-4">
            <div class="terms-sidebar">
                <div class="user-details-wrapper">
                    <div class="user-details-top">
                        <div class="thumb">
                            <a href="{{ route('public.profile', $ad->user->username) }}"><img alt="image" src="{{ getImage($profileImage->path . '/' . @$ad->user->image, null, true) }}"></a>
                        </div>
                        <div class="content">
                            <h5><a class="text--base" href="{{ route('public.profile', $ad->user->username) }}">{{ __($ad->user->username) }}</a></h5>
                            <ul class="user-review">
                                <li>
                                    <span title="@lang('Positive Feedback')">
                                        <i class="las la-thumbs-up text--success"></i> {{ $positive }}
                                    </span>
                                </li>
                                <li>
                                    <span title="@lang('Negative Feedback')">
                                        <i class="las la-thumbs-down text--danger"></i> {{ $negative }}
                                    </span>
                                </li>
                                <li class="w-100">
                                    <span title="@lang('Country')">
                                        <i class="la la-globe"></i> {{ @$ad->user->address->country }}
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="user-details-main mt-3">
                        <ul class="user-details-list mt-3">
                            <li>
                                @if ($ad->user->ev)
                                    <i class="fas fa-check-circle text--success"></i>
                                @else
                                    <i class="fas fa-times-circle text--danger"></i>
                                @endif
                                @lang('Email Address Verified')
                            </li>

                            <li>
                                @if ($ad->user->sv)
                                    <i class="fas fa-check-circle text--success"></i>
                                @else
                                    <i class="fas fa-times-circle text--danger"></i>
                                @endif
                                @lang('Mobile Number Verified')
                            </li>

                            <li>
                                @if ($ad->user->kv == 1)
                                    <i class="fas fa-check-circle text--success"></i>
                                @else
                                    <i class="fas fa-times-circle text--danger"></i>
                                @endif
                                @lang('KYC Data Verified')
                            </li>

                            <li>
                                <i class="las la-clock"></i>
                                @lang('Avg. Speed'):
                                @if ($ad->user->completed_trade)
                                    <span class="fw-bold">
                                        {{ round($ad->user->total_min / $ad->user->completed_trade) }}
                                        @lang('Minutes') / @lang('Trade')
                                    </span>
                                @else
                                    @lang('No trades yet')
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="terms-sidebar__widget">
                    <h6 class="title"><i class="las la-file-invoice"></i> @lang('Terms of This Trade')</h6>
                    <p>{{ __($ad->terms) }}</p>
                </div>
                <div class="terms-sidebar__widget">
                    <h6 class="title"><i class="las la-file-invoice-dollar"></i>
                        @lang('Payment details of This Trade')</h6>
                    <p>{{ __($ad->details) }}</p>
                </div>
            </div>
        </div>
        <div class="col-12">
            <h4 class="mt-5 mb-3">@lang('Feedbacks on This Advertisement')</h4>
            @include($activeTemplate . 'partials.reviews')
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function($) {
            "use strict";

            $('#amount').on('input', function() {
                var min = '{{ $ad->min }}';
                var max = '{{ $maxLimit }}';
                var amount = $('#amount').val();
                var rate = '{{ getRate($ad) }}';
                $('.message').text('');
                if (parseFloat(amount) < parseFloat(min)) {
                    $('.message').text(
                        `@lang('Minimum Limit is') : ${parseFloat(min).toFixed(2)} {{ __($ad->fiat->code) }}`);
                    $('#final-amount').val(0);
                } else if (parseFloat(amount) > parseFloat(max)) {
                    $('.message').text(
                        `@lang('Maximum Limit is') : ${parseFloat(max).toFixed(2)} {{ __($ad->fiat->code) }}`);
                    $('#final-amount').val(0);
                } else {
                    var finalAmount = (1 / parseFloat(rate)) * parseFloat(amount);
                    $('#final-amount').val(parseFloat(finalAmount).toFixed(8));
                }
            });

            $('#final-amount').on('input', function() {
                var min = '{{ $ad->min }}';
                var max = '{{ $maxLimit }}';
                var amount = $('#final-amount').val();
                var rate = '{{ getRate($ad) }}';

                $('.message').text('');

                var finalAmount = parseFloat(rate) * parseFloat(amount);

                if (parseFloat(finalAmount) < parseFloat(min)) {
                    $('.message').text(`@lang('Minimum Limit is') : ${parseFloat(min).toFixed(2)} {{ __($ad->fiat->code) }}`);
                    $('#amount').val(0);
                } else if (parseFloat(finalAmount) > parseFloat(max)) {
                    $('.message').text(`@lang('Maximum Limit is') : ${parseFloat(max).toFixed(2)} {{ __($ad->fiat->code) }}`);
                    $('#amount').val(0);
                } else {
                    $('#amount').val(parseFloat(finalAmount).toFixed(2));
                }

            });

        })(jQuery)
    </script>
@endpush
