@extends('layouts.reportlayout')
@section('meta_ogtag')

    <meta property="og:image" content="{{$ImageUrl}}">
    <meta property="og:image:width" content="300">
    <meta property="og:image:height" content="300">
    <meta name="keywords" content="{{$finalKeword}}">

@endsection

@section('content')


    <div class="container mt-5">
        <div class="row mb-4">
            <div class="col-lg-12">
                <div class="bg-new text-center mb-4">
                    <h3 class="main-title mb-0 fs-3 d-flex align-items-center justify-content-center">
                        <span class="icon-warning fs-1 me-3"></span>
                        {!! optionByKey('reported_heading') !!}
                    </h3>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
               
			   @include('searchtemp.profile-rotation')
			   
			</div>
        </div>
       

        <div class="row">
            <div class="col-lg-12 mt-4">
                					
                <div class="alert alert-danger print-error-msg" style="display:none">
                    <ul class="mb-0"></ul>
                </div>

                <form name="report" id="reportemail">
                {{csrf_field()}} 
                <input type="hidden" name="profile_title" value="{{$profile->title}}">
                <input type="hidden" name="post_url" value="{{url()->full()}}">
                <input type="hidden" name="profile_url" value="{{$profile->slug_name}}">
                <input type="hidden" name="profile_id" value="{{$profile->post_id}}">
                <input type="hidden" name="redirect_url" value="{{$profile->catName->slug.'/'.$profile->cityName->slug}}">	
                    
                    <div class="form-group">
                        <label class="mb-2">{!! optionByKey('more_info') !!}:</label>
                        					
						@error('description')
							<div id="termsFeedback" role="alert" class="error-message">
									{{ $message }}
							</div>
						@enderror
						
                        <textarea  name="description" placeholder="{!! optionByKey('more_info_provide') !!}" rows="3" class="form-control"></textarea>
                    </div>
					
                    <div class="form-group mb-3">
                        <small>
							{!! str_replace('<p>', '', str_replace('</p>', '', optionByKey('more_info_content'))) !!}
                        </small>
                    </div>
					
					<div class="form-group mb-2">
					    
					    <x-turnstile-captcha :language="substr(optionByKey('locale'), 0, 2)" />
				
					</div>			
                            
                    <div class="form-group">
                        <button disabled id="reportAd" type="button"  class="frm-btn btn btn-primary">
                            {!! optionByKey('reported_button') !!} 
                        </button>
                    </div>
                </form>               
				
				<div class="message-result"></div>

            </div>
        </div>

    </div>


@endsection

@push('css-styles')

    <link rel="stylesheet" href="/static/css/li-det.css?v={{time()}}" type="text/css">

@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>


<script>

    $("img").lazyload({
        effect: "fadeIn",
    });

    $('.toggle-btn-box').css({'position': 'relative','top': '-40px','padding-top': '50px','background': 'linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))'});
    $('.toggle-collapse').click(function (e) {
        e.preventDefault();
        var target = $('#collapseContent');
        var parentContainer = $(this).closest('.toggle-btn-box');
        if (target.hasClass('show')) {
            target.removeClass('show');
            $(this).text('{{optionByKey('list_show_more')}}');
            parentContainer.css({
                'position': 'relative',
                'top': '-40px',
                'padding-top': '50px',
                'background': 'linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))'
            });
        } else {
            target.addClass('show');
            $(this).text('{{optionByKey('list_show_less')}}');
            parentContainer.css({
                'position': 'relative',
                'display': 'block',
                'top': '0',
                'padding-top': '20px',
                'background': ''
            });
        }
    });
	
	
	
	
	$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$("#reportAd").click(function(e) {
    e.preventDefault();

    var button = $(this);
    button.prop('disabled', true);

    var profile_title = $("input[name='profile_title']").val();
    var profile_url = $("input[name='profile_url']").val();
    var profile_id = $("input[name='profile_id']").val();
    var post_url = $("input[name='post_url']").val();
    var redirect_url = $("input[name='redirect_url']").val();
    var description = $("textarea[name='description']").val();
    var cfturnstileresponse = $("input[name='cf-turnstile-response']").val(); // ✅ use input, not textarea

    $(".error-message").remove();

    $.ajax({
        type: 'POST',
        url: "{{ url('reportad/emailsend') }}",
        data: {
            description: description,
            profile_id: profile_id,
            post_url: post_url,
            redirect_url: redirect_url,
            profile_title: profile_title,
            profile_url: profile_url,
            "cf-turnstile-response": cfturnstileresponse, // ✅ wrap key in quotes
        },
        success: function(response) {
            window.location.href = response.redirecturl;
        },
        error: function(response) {
            $('input').removeClass('invalid');
            $.each(response.responseJSON.errors, function(field_name, error) {
                var field = $('[name="' + field_name + '"]');
                field.siblings('.error-message').remove();
                field.before('<div class="error-message mt-0">' + error + '</div>').addClass('invalid').focus();

                if (field_name === 'cf-turnstile-response') {
                    $('.cf-turnstile').siblings('.error-message').remove();
                    $('.cf-turnstile').after('<div class="error-message mt-0">' + error + '</div>');
                }
            });
        },
        complete: function() {
            button.prop('disabled', false);
        }
    });
});


  
</script>
@endpush