@extends('layouts.admin')

@section('title') View @endsection

@section('content')
@push('page_style')
<!-- Owl slider Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="{{ asset('frontend/css/slick-slider.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/select2.min.css') }}">


<script type="text/javascript">

    function googleTranslateElementInit() {
        code =  $('#defaultLanguage').val();
        delete_cookie('googtrans');
       setCookie('googtrans', '/en/'+code+'',1);
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    }
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
@endpush
<section class="category_view">

  <div class="col-md-9 col-lg-12 mb-2">
    <div class="row breadcrumbs-top">
      <div class="col-12">
        <div class="user_nav">
          <div class="breadcrumb-wrapper">
            <h5>Reports</h5>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{url('report')}}">Reports</a></li>
              <li class="breadcrumb-item"><a class="active" href="#">Views</a></li>
            </ol>
          </div>
          @if(!auth()->user()->isAccountant())
            <div class="actionbtn_">
                    <!-- These buttons will only be shown when the ad is NOT deleted -->

                    @if ($report->status == \App\Models\Report::STATUS_PENDING)
                        <a class="btn btn_ mr-2 approveReject" data-id="{{$report->model_id }}" data-id="{{$report->model_type }}"  data-toggle="modal" data-target="#approveReportModal">{{__("Correct")}}</a>
                    @endif

                    {{-- @if ($advertismentObject->is_approved == \App\Models\Advertisment::IS_APPROVED) --}}
                        {{-- <a class="btn btn_ rejectModal {{((((auth()->user()->is_auto_ads_approve == 1) || (!empty($activity) && ($activity->causer_id != auth()->user()->id))) && (auth()->user()->isModerator())) ? ' disabled' : '')}}" data-id="{{$advertismentObject->id}}" data-state="{{\App\Models\Advertisment::IS_NOT_APPROVED}}">{{__("words.Reject")}}</a> --}}
                    {{-- @endif --}}

                <!-- "Go Back" button, will be shown in all cases -->
                <a id="tool-btn-manage" class="btn btn_ active text-right" href="javascript:window.history.back();" title="Back to Trashed">
                    {{__("words.Go Back")}}
                </a>
            </div>
            @endif
        </div>
      </div>
    </div>
      <div class="category">
      <div class="col-md-12">
        <div class="reportHeader">
          <div class="repotTittle">
            <h5>Report Title Here</h5>
            <p>{{$report->getReportedTitle()}}</p>
            @if ($report->model_type == \App\Models\Report::TYPE_ADS && !empty($report->getAdvertisment))
            <h6>Ad Unique Id</h6>

            <a href="{{route('advertisment.viewOriginal', ['title' => !empty($report->getAdvertisment->slug) ? $report->getAdvertisment->slug:$report->getAdvertisment->title,'id' => encrypt($report->getAdvertisment->id),'url'=>$url ])}}">{{!empty($report->getAdvertisment) ? $report->getAdvertisment->unique_id : 'N/A'}}</a>

            @endif

            @if ($report->model_type == \App\Models\Report::TYPE_USER || $report->model_type == \App\Models\Report::TYPE_CHAT || $report->model_type == \App\Models\Report::TYPE_REPORTED)
            <h6>User Name</h6>
            <a href="{{route('users.show', encrypt($report->model_id))}}">{{!empty($report->user) ? $report->user->full_name : 'N/A'}}</a>
            @endif




          </div>
          <div class="rightContent">
            <div class="dateTime">
              <img src="{{asset('frontend/img/Company.svg')}}">
              <h4>{{!empty($report->created_at) ? $date : 'N/A'}} </h4>

            </div>
            <h5>REPORT {{!empty($report->report_id) ? $report->report_id : 'N/A'}}</h5>
          </div>
        </div>
        </div>

      <div class="col-md-12">
        <div class="discription-content">
          <div class="discription-tittle">
            <h3>Description</h3>
          </div>
          <div class="discriptionMain">
            {{!empty($report->getReason()) ? nl2br($report->getReason()) : 'N/A'}}
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="discription-content">
          <div class="discription-tittle">
            <h3>Comment</h3>
          </div>
          <div class="discriptionMain">
            {{!empty($report->comment) ? nl2br($report->comment) : 'N/A'}}
          </div>
        </div>
      </div>
      @php
      $defaultTarget =  getDefaultTargetLanguage();
      $originalLanguage = isset($advertismentObject->getCreatedBy->languageList()[$advertismentObject->language_code]) ? $advertismentObject->getCreatedBy->languageList()[$advertismentObject->language_code] : 'English';
      $transltedTitle = $advertismentObject->getTranslatedTitle($defaultTarget);
      $slug = $advertismentObject->category_slug
      @endphp
      <div class="col-md-12">
        <div class="discription-content">
          <div class="discription-tittle">
            <h3>Advertisement</h3>
          </div>
          <div class="row mt-3">
            <div class="car_details_maintiltle dd notranslate">
                <h3>{{!empty($transltedTitle) ? $transltedTitle :''}}</h3>
            </div>
            @if ($slug == 'sale')
            @include('advertisment.partials.admin.forsale')
            @else
            @include('advertisment.partials.admin.buy')

            @endif



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

    </div>
    <div class="modal fade notranslate" id="approveReportModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <a href="#" class="cancel-model" onclick="$('#approveReportModal').modal('hide')" data-bs-dismiss="modal"
                aria-label="Close">
                <img src="{{asset('frontend/img/Cancel.svg')}}" class="img-fluid"></a>
            <div class="modal-header">
                <img src="{{asset('frontend/img/Rejet.svg')}}" class="img-fluid">
                <h6>Are you sure this report is correct?</h6>
            </div>
            <div class="modal-body">
                <div class="group_btn">
                    <a class="btn btn_ submitApproveform" data-id="{{$report->model_id }}" data-type="{{$report->model_type }}"">Yes, Correct</a>
                    <a href="javascript:void(0);" class="btn btn_ Rejetform"
                        onClick="$('#approveReportModal').modal('hide');">No, Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
@push('page_script')
<script src="{{ asset('frontend/js/select2.min.js') }}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script
    src="https://maps.googleapis.com/maps/api/js?key={{ config("services.maps.api_key") }}&libraries=places&callback=initMap&v=weekly"
    defer></script>
<script src="{{ asset('js/pages/advertisment/currencyConvert.js') }}"></script>
<script src="{{ asset('frontend/js/slick-slider.js') }}"></script>
<script src="{{ asset('js/pages/reject.js') }}"></script>
<script src="{{ asset('js/pages/advertisment/currencyConvert.js') }}"></script>
<script>
$(document).on('click', '.submitApproveform', function (e) {
    e.preventDefault();

    let $btn = $(this);
    $btn.addClass('block-button-text-disabled disabled');

    $.ajax({
        url: site_url + "/report/changeStatus",
        type: "POST",
        data: {
            id: $btn.data('id'),
            type: $btn.data('type'),
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function (result) {
            $('#approveModal').modal('hide');
            toastr.success(result.message, 'Success!', { closeButton: true, tapToDismiss: false });

            // redirect to reports page
            window.location.href = site_url + "/reports";
        },
        error: function (xhr) {
            toastr.error("Something went wrong", 'Error!', { closeButton: true, tapToDismiss: false });
            window.location.reload();
        },
        complete: function () {
            $btn.removeClass('block-button-text-disabled disabled');
        }
    });
});

    function initMap() {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode(
            { 'address': $('#search_input').val() },
            function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();

                    var myLatLng = { lat: latitude, lng: longitude };

                    var map = new google.maps.Map(document.getElementById('address-map'), {
                        zoom: 14,
                        center: myLatLng,
                    });

                    new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        title: 'Selected Location'
                    });
                } else {
                    console.warn("Geocode failed: " + status);
                    // fallback to a default location
                    var defaultLatLng = { lat: 20.5937, lng: 78.9629 }; // India center
                    var map = new google.maps.Map(document.getElementById('address-map'), {
                        zoom: 4,
                        center: defaultLatLng,
                    });
                }
            }
        );
    }

    window.initMap = initMap;
</script>



<script>
$('.select2-multiple').select2({
        allowClear: false,
        placeholder: $('#SelectTheLanguageText').val(),
        containerCssClass: "notranslate",
        dropdownCssClass: "notranslate",
        language: {
            noResults: function() {
                return $('#NoResultsFoundText').val();
            }
        },
    });

    // Force Google Translate always to English
    const triggerEvent = (element, eventName) => {
        if (!element) return;
        const event = new Event(eventName);
        element.dispatchEvent(event);
        setCookie('googtrans', '/en/en', 1);
    };

    function printErrorMsg(msg) {
        $.each(msg, function(key, value) {
            $('.' + key + '_err').text(value);
        });
    }

    // Open video modal
    $(document).on('click', '.linkvideo_', function(e) {
        e.preventDefault();
        $('#videoopen').modal('show');
        $('#videoFrame').attr('src', $(this).data('value'));
    });




</script>

<script>
    $(document).on('click', '.linkvideo_', function (e) {
        e.preventDefault();
        $('#videoopen').modal('show');
        $('#videoFrame').attr('src',$(this).data('value'));
    });


</script>


{{-- <script>
    $(document).on('click', '.closeicon_', function() {
        $('#videoFrame').attr('src','');
        $('#videoopen').trigger('click');
    });
</script> --}}
<script>
     $(document).on('click', '.show-ad-red', function (e) {
        e.preventDefault();
        const $select = $('#changeLanguageOfAdvertisement');
        if (!$select.hasClass("select2-initialized")) {
            $select
                .select2({
                    placeholder: "Select the language you want"
                })
                .addClass("select2-initialized");
        }
        $select.val('').trigger('change.select2');

        let adId = $(this).data('id');
        let url = site_url + "/original-langauge";
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                ad_id: adId,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF token for Laravel
            },
            beforeSend: function() {
                $('#process-image-loader').css("display", "flex");
            },
            success: function (response) {
                let title = response.title
                let description = response.description
                let keywords = response.keywords
                if(title != "" || title != null){
                    $(document).find(".car_details_maintiltle h3").text(title)
                }
                if(description != "" || description != null){
                    $(document).find(".overview_detail .description").text(nl2br(description))
                }
                if (keywords && keywords.length > 0) {
                    let html = '';
                    keywords.forEach(function (keyword, index) {
                        html += `<div class="textkeyword_">
                                    <h5 class="keywordHead">
                                        ${keyword}
                                    </h5>
                                </div>`;
                    });

                    $(document).find(".keywordInner").html(html);
                }
            },
            complete: function() {
                // Hide loader
                $('#process-image-loader').fadeOut("slow");
            },
            error: function (xhr) {
                console.error('API call failed', xhr);
            }
        });
    });

    function nl2br(str) {
        if (!str) return "";
        return str.replace(/\n/g, "<br>");
    }

    $("#changeLanguageOfAdvertisement").on('change', function(e) {
        e.preventDefault();
        console.log("this",this)
        let selectedOption = $(this).find('option:selected');
        let language = selectedOption.data('language');
        let adId = selectedOption.data('ad_id');
        let url = site_url + "/advertisement-langauge";
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                ad_id: adId,
                language: language
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF token for Laravel
            },
            beforeSend: function() {
                $('#process-image-loader').css("display", "flex");
            },
            success: function (response) {
                let title = response.title
                let description = response.description
                let keywords = response.keywords
                if(title != "" || title != null){
                    $(document).find(".car_details_maintiltle h3").text(title)
                }
                if(description != "" || description != null){
                    $(document).find(".ad_description").text(nl2br(description))
                }
                if (keywords && keywords.length > 0) {
                    let html = '';
                    keywords.forEach(function (keyword, index) {
                        html += `<div class="textkeyword_">
                                    <h5 class="keywordHead">
                                        ${keyword}
                                    </h5>
                                </div>`;
                    });

                    $(document).find(".keywordInner").html(html);
                }
            },
            complete: function() {
                // Hide loader
                $('#process-image-loader').fadeOut("slow");
            },
            error: function (xhr) {
                console.error('API call failed', xhr);
                $('#process-image-loader').fadeOut("slow");
            }
        });
    });
</script>
@endpush
@endsection