@extends('layouts.app')
@section('title')
    @if (!empty($title))
        {{ strip_tags($title) }} |
    @endif @parent
@endsection

@section('social-meta')
    <meta property="og:title" content="{{ safe_output($ad->title) }}">
    <meta property="og:description"
        content="{{ substr(trim(preg_replace('/\s\s+/', ' ', strip_tags($ad->description))), 0, 160) }}">
    @if ($ad->media_img->first())
        <meta property="og:image" content="{{ media_url($ad->media_img->first(), true) }}">
    @else
        <meta property="og:image" content="{{ asset('uploads/placeholder.png') }}">
    @endif
    <meta property="og:url" content="{{ route('single_ad', [$ad->id, $ad->slug]) }}">
    <meta name="twitter:card" content="summary_large_image">
    <!--  Non-Essential, But Recommended -->
    <meta name="og:site_name" content="{{ get_option('site_name') }}">
@endsection

@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/plugins/fotorama-4.6.4/fotorama.css') }}">
@endsection

@section('content')
    @if (get_option('enable_monetize') == 1)
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    {!! get_option('monetize_code_below_ad_title') !!}
                </div>
            </div>
        </div>
    @endif

    <div class="single-auction-wrap">

        <div class="container">
            @livewire('scopead', ['id' => $ad->id], key($ad->id))
        </div>

    </div>

    <div class="floating-container">
        <div class="floating-button"><i class="fa fa-share"></i></div>
        <div class="element-container">

            <span class="float-element tooltip-left share s_facebook">
                <i class="fa fa-facebook"></i>
            </span>
            </span>
            <span class="float-element share s_twitter">
                <i class="fa fa-twitter"></i>
            </span>
            <span class="float-element share s_linkedin">
                <i class="fa fa-linkedin"></i>
            </span>
        </div>
    </div>

    {{-- @livewire('winner') --}}
@endsection

@section('page-js')
    @if (get_option('enable_fb_comments') == 1)
        <div id="fb-root"></div>
        <script>
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s);
                js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        </script>
    @endif

    <script src="{{ asset('assets/plugins/fotorama-4.6.4/fotorama.js') }}"></script>
    <script src="{{ asset('assets/plugins/SocialShare/SocialShare.js') }}"></script>
    <script src="{{ asset('assets/plugins/form-validator/form-validator.min.js') }}"></script>

    <script>
        $('.share').ShareLink({
            title: '{{ $ad->title }}', // title for share message
            text: '{{ substr(trim(preg_replace('/\s\s+/', ' ', strip_tags($ad->description))), 0, 160) }}', // text for share message

            @if ($ad->feature_img)
                image: '{{ media_url($ad->feature_img, true) }}', // optional image for share message (not for all networks)
            @else
                image: '{{ asset('uploads/placeholder.png') }}', // optional image for share message (not for all networks)
            @endif
            url: '{{ route('single_ad', [$ad->id, $ad->slug]) }}', // link on shared page
            class_prefix: 's_', // optional class prefix for share elements (buttons or links or everything), default: 's_'
            width: 640, // optional popup initial width
            height: 480 // optional popup initial height
        })
    </script>
    <script>
        $.validate();
    </script>

    <script>
        $(function() {
            $('#onClickShowPhone').click(function() {
                $('#ShowPhoneWrap').html('<i class="fa fa-phone"></i> {{ $ad->seller_phone }}');
            });

            $('#save_as_favorite').click(function() {
                var selector = $(this);
                var slug = selector.data('slug');

                $.ajax({
                    type: 'POST',
                    url: '{{ route('save_ad_as_favorite') }}',
                    data: {
                        slug: slug,
                        action: 'add',
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        if (data.status == 1) {
                            selector.html(data.msg);
                        } else {
                            if (data.redirect_url) {
                                location.href = data.redirect_url;
                            }
                        }
                    }
                });
            });

            $('button#report_ad').click(function() {
                var reason = $('[name="reason"]').val();
                var email = $('[name="email"]').val();
                var message = $('[name="message"]').val();
                var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                var error = 0;
                if (reason.length < 1) {
                    $('#reason_info').html('<p class="text-danger">Reason required</p>');
                    error++;
                } else {
                    $('#reason_info').html('');
                }
                if (email.length < 1) {
                    $('#email_info').html('<p class="text-danger">Email required</p>');
                    error++;
                } else {
                    if (!regex.test(email)) {
                        $('#email_info').html('<p class="text-danger">Valid email required</p>');
                        error++;
                    } else {
                        $('#email_info').html('');
                    }
                }
                if (message.length < 1) {
                    $('#message_info').html('<p class="text-danger">Message required</p>');
                    error++;
                } else {
                    $('#message_info').html('');
                }

                if (error < 1) {
                    $('#loadingOverlay').show();
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('report_ads_pos') }}',
                        data: {
                            reason: reason,
                            email: email,
                            message: message,
                            slug: '{{ $ad->slug }}',
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            if (data.status == 1) {
                                toastr.success(data.msg, '@lang('app.success')', toastr_options);
                            } else {
                                toastr.error(data.msg, '@lang('app.error')', toastr_options);
                            }
                            $('#reportAdModal').modal('hide');
                            $('#loadingOverlay').hide();
                        }
                    });
                }
            });

            $('#replyByEmailForm').submit(function(e) {
                e.preventDefault();
                var reply_email_form_data = $(this).serialize();

                $('#loadingOverlay').show();
                $.ajax({
                    type: 'POST',
                    url: '{{ route('reply_by_email_post') }}',
                    data: reply_email_form_data,
                    success: function(data) {
                        if (data.status == 1) {
                            toastr.success(data.msg, '@lang('app.success')', toastr_options);
                        } else {
                            toastr.error(data.msg, '@lang('app.error')', toastr_options);
                        }
                        $('#replyByEmail').modal('hide');
                        $('#loadingOverlay').hide();
                    }
                });
            });

            $(document).on('click', '.comments-list .fa-reply', function(e) {
                e.preventDefault();

                var comment_id = $(this).closest('.comment-box').attr('data-comment-id');
                var reply_form = $('.post-comments-form').html();
                reply_form +=
                    '<a href="javascript:;" class="text-danger reply_form_remove"><i class="fa fa-times"> </a>';

                //reply_form_box
                $(this).closest('.comment-box').find('.reply_form_box').html(reply_form).show().find(
                    '.comment_id').val(comment_id);

            });

            $(document).on('click', '.reply_form_remove', function(e) {
                e.preventDefault();
                $(this).closest('form').remove();
                $(this).closest('.reply_form_box').hide();
            });

        });
    </script>

    <script>
        Echo.channel('bid.' + {{ $ad->id }})
            .listen('PushBid', (e) => {
                livewire.emit("refreshData" + {{ $ad->id }});
            });
    </script>

    <script>
        livewire.on('winner', data => {
            gServerTime = new Date(data);
        })

        livewire.on('conffeti', data => {
            eventoConfetto();
        })
    </script>
@endsection