@php
use Illuminate\Support\Str;
@endphp
@section('keywords')
    {{ __('detail.Buy and sell profuct for') }}

    @foreach ($categories as $category)
        {{ $category->title }},
    @endforeach
@endsection
@section('title')
    {{ config('app.name') }} | {{ __('detail.Buy and sell product') }}
@endsection

@section('description')
    {{ config('app.name') }}
    {{ __('detail.is the safest digital property marketplace. If you want to buy or sell a product.') }}
@endsection

@section('page_title')
    {{ config('app.name') }}
@endsection

@php
    //  session()->put('locale',$target);
    $target = getDefaultTargetLanguage();
    $code = getcountryCode();
    $countryID = App\Models\User::getCountryIdByCode($code);
@endphp



<!-- Start Main -->
<main>
    <!-- Start Banner Section -->
    <section class="banner">
        <div class="container">
            <div id="homebannerCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#homebannerCarousel" data-bs-slide-to="0" aria-current="true"
                        aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#homebannerCarousel" data-bs-slide-to="1"
                        aria-label="Slide 2" class="active"></button>
                    <button type="button" data-bs-target="#homebannerCarousel" data-bs-slide-to="2"
                        aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="{{ asset('frontend/img/banner1.webp') }}"  class="d-block " alt="banner-image">
                        <div class="bannerContent">
                            <div class="container">
                                <div class="bannerContentArea row align-items-center">
                                    <div class="col-md-6">
                                        <div class="bannerContentLeft">
                                            <h3 class="bannerHeadTxt">
                                                {{ __('words.Buy & Sell') }}
                                                <p class="bannerHeadInner">
                                                    {{ __('words.Anything you want with cryptocurrency.') }}</p>
                                            </h3>
                                            <p class="bannerSubtxt">
                                                {{ __('words.Countrys most loved and trusted classified ad listing website. Browse thousand of items near you Browse thousand.') }}
                                            </p>
                                            <div class="bannerBtns">
                                                <a href="{{ route('category.list', ['id' => encrypt($categories[0]->id)]) }}"
                                                    class="primary_btn browseBtn language{{ $target }} ">{{ __('words.Browse Ads') }}</a>
                                                <a href="{{ url('advertisment-create') }}"
                                                    class="secondary_btn">{{ __('words.Post Ads') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bannerContentRight">
                                            <img src="{{ asset('frontend/img/bannerOvlp.png') }}" class="img-fluid" alt="banner-image">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="{{ asset('frontend/img/banner1.webp') }}" class="d-block" alt="banner-image">
                        <div class="bannerContent">
                            <div class="container">
                                <div class="bannerContentArea row align-items-center">
                                    <div class="col-md-6">
                                        <div class="bannerContentLeft">
                                            <h3 class="bannerHeadTxt">
                                                {{ __('words.Buy & Sell') }}
                                                <p class="bannerHeadInner">
                                                    {{ __('words.Anything you want with cryptocurrency.') }}</p>
                                            </h3>
                                            <p class="bannerSubtxt">
                                                {{ __('words.Countrys most loved and trusted classified ad listing website. Browse thousand of items near you Browse thousand.') }}
                                            </p>
                                            <div class="bannerBtns">
                                                <a href="{{ route('category.list', ['id' => encrypt($categories[0]->id)]) }}"
                                                    class="primary_btn browseBtn language{{ $target }}">{{ __('words.Browse Ads') }}</a>
                                                <a href="{{ url('advertisment-create') }}"
                                                    class="secondary_btn">{{ __('words.Post Ads') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bannerContentRight">
                                            <img src="{{ asset('frontend/img/bannerOvlp.png') }}" class="img-fluid" alt="banner-image">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="{{ asset('frontend/img/banner1.webp') }}" class="d-block" alt="banner-image">
                        <div class="bannerContent">
                            <div class="container">
                                <div class="bannerContentArea row align-items-center">
                                    <div class="col-md-6">
                                        <div class="bannerContentLeft">
                                            <h3 class="bannerHeadTxt">
                                                {{ __('words.Buy & Sell') }}
                                                <p class="bannerHeadInner">
                                                    {{ __('words.Anything you want with cryptocurrency.') }}</p>
                                            </h3>
                                            <p class="bannerSubtxt">
                                                {{ __('words.Countrys most loved and trusted classified ad listing website. Browse thousand of items near you Browse thousand.') }}
                                            </p>
                                            <div class="bannerBtns">
                                                <a href="{{ route('category.list', ['id' => encrypt($categories[0]->id)]) }}"
                                                    class="primary_btn browseBtn language{{ $target }}">{{ __('words.Browse Ads') }}</a>
                                                <a href="{{ url('advertisment-create') }}"
                                                    class="secondary_btn">{{ __('words.Post Ads') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bannerContentRight">
                                            <img src="{{ asset('frontend/img/bannerOvlp.png') }}" class="img-fluid" alt="banner-image">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#homebannerCarousel"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true">
                        <i class="las la-angle-left"></i>
                    </span>
                    <span class="visually-hidden">{{ __('words.Previous') }}</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#homebannerCarousel"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true">
                        <i class="las la-angle-right"></i>
                    </span>
                    <span class="visually-hidden">{{ __('words.Next') }}</span>
                </button>
            </div>
        </div>
    </section>
    <!-- End Banner Section -->
    <!-- Start Categories Section -->
    <section class="categories">
        <div class="container">
            <div class="row mb-4">
                <div class="col-md-12 text-center">
                    <h2 class="headingTxt">{{ __('words.Browse By Categories') }}</h2>
                </div>
            </div>

            <div class="row mb-2 replaceCategory">
                @foreach ($categories as $category)
                    <div class="col-6 col-sm-6 col-md-3 col-lg-2 mb-2 custom_col">
                        <a href="{{ route('category.list', ['id' => encrypt($category->id)]) }}">
                            <div class="cateCard">
                            <img src="{{ !empty($category->image) ? $category->image : asset('frontend/img/shirt-1.png') }}"
                                class="img-fluid"
                                alt="{{ $category->title }}">
                                <p class="cateCardTxt">
                                    {{ __("category.$category->title") }}
                                </p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- End Categories Section -->
    <!-- Start Feature Section -->
    <section class="featured">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="headingTxt">{{ __('words.Featured Listings') }}</h2>
                    <p class="headingSubtext_">{{ __('words.Newly Added') }} </p>
                </div>
            </div>

            <div class="listingsTabs">
                <ul class="nav nav-tabs listingsTabs_" id="myTab" role="tablist">
                    <li class="nav-item language{{ $target }}" role="presentation"
                        data-slug="sale">
                        <button class="nav-link active forSale" id="home-tab" data-bs-toggle="tab"
                            data-bs-target="#home" type="button" role="tab" aria-controls="home"
                            aria-selected="true">{{ __('words.For Sale') }}</button>
                    </li>
                    <li class="nav-item language{{ $target }}" role="presentation"
                        data-slug="buy">
                        <button class="nav-link looktobuy " id="profile-tab" data-bs-toggle="tab"
                            data-bs-target="#profile" type="button" role="tab" aria-controls="profile"
                            aria-selected="false">{{ __('detail.Look to Buy') }}</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel"
                        aria-labelledby="home-tab">
                        <div class="row">
                            @forelse ( $forsaleadvertisments as $advertisment)
                                @php
                                    $slugTitle = str::slug($advertisment->title);
                                    if($slugTitle == '')
                                    {
                                        $slug = preg_replace('/\s+/', '-', $advertisment->title);
                                        $slugTitle = trim($slug, '-');
                                    }
                                @endphp
                                <div class="col-sm-6 col-md-6 col-lg-3  ">
                                    <div class="card custom_card">
                                        <a href="{{ url($code . '/' . $target . '/' . $slugTitle . '/' . $advertisment->id) }}"
                                            class="custom_cardImg">
                                            <img src="{{ count($advertisment->files) > 0 && $advertisment->files[0]->thumbnail_image ? $advertisment->files[0]->thumbnail_image : asset('images/default-watermark.png') }}"
                                            class="card-img-top" alt="{{ $advertisment->title }}" alt="{{ $advertisment->title }}">
                                            @if (count($advertisment->InternationalPromoted) > 0 || $advertisment->isLocalPromoted($countryID) || isset($advertisment->promoWord))
                                                <div class="promotedTag">
                                                    <img class="me-1" src="{{ asset('frontend/img/Line.svg') }}" alt="promoted ad">
                                                    <span class="promoText ">{{__(" $advertisment->promoWord")}}</span>
                                                </div>
                                            @endif

                                        </a>
                                        @auth
                                        @if(auth()->user()->id!=$advertisment->created_by_id)
                                            <img src="{{ !empty($advertisment->is_favorite) ? asset('frontend/img/likeIcon.svg') : asset('frontend/img/heartIcon.png') }}"
                                                class="img-fluid heartOverlap likeUnLike"
                                                id="likeDislike{{ $advertisment->id }}"
                                                data-id="{{ $advertisment->id }}" alt="like button">
                                        @endif
                                        @endauth

                                        @guest
                                            <a href="{{ route('login') }}"><span>
                                                    <img src="{{ asset('frontend/img/heartIcon.png') }}"
                                                        class="img-fluid heartOverlap likeUnLike" alt="like button">
                                                </span></a>
                                        @endguest

                                        <div class="card-body custom_cardBody">
                                            <div class="commonCardbox_">
                                                <div class="cardTop_">
                                                    
                                                      <div class="listDetails">
                                                        <a
                                                            href="{{ url($code . '/' . $target . '/' . $slugTitle . '/' . $advertisment->id) }}">
                                                            <h5 class="sscard_title">
                                                                {{ $advertisment->translatedTitle }}
                                                            </h5>
                                                        </a>
                                                        <p class="card_subtitle">

                                                            <span class="flag-icon flag-icon-{{ !empty($advertisment->country->iso2) ? strtolower($advertisment->country->iso2) :'' }} flag-icon-squared"></span>

                                                            @if(empty($advertisment->jobs))
                                                            {{ $advertisment->translatedAddress }}
                                                            @endif

                                                        </p>
                                                    </div>

                                                    <div class="listDetailsTime">
                                                        @php
                                                            $verifyCount = $advertisment->getCreatedBy->year_count;
                                                        @endphp
                                                        @if ($verifyCount > '0')
                                                            <div class="mainboxcount">
                                                                <div class="limitbadge">
                                                                    <div class="userIcon">
                                                                        <img src="{{ asset('frontend/img/adusericon.png') }}"
                                                                            class="img-fluid" alt="user icon">
                                                                        <div class="positionicon">
                                                                            <img src="{{ asset('frontend/img/verified.svg') }}"
                                                                                class="img-fluid" alt="verified icon">
                                                                        </div>
                                                                    </div>
                                                                    <h4>{{ $verifyCount }}y</h4>
                                                                </div>
                                                            </div>
                                                        @endif
                                                        <spanclass="listTime">{{ $advertisment->created_at->diffForHumans() }}</span>

                                                    </div>


                                                </div>
                                                <div class="cardPriceList_">
                                                    <h4 class="listPrice_">{{ $advertisment->currency_type == 1 ? $advertisment->paymentMethods->symbol .' '. $advertisment->price : $advertisment->price .' '. $advertisment->paymentMethods->title }}</h4>
                                                    <span class="card_subtitle">{{ __('words.(Fixed Price)') }}</span>
                                                </div>
                                                <div class="bitcoinbox col-sm-12">

                                                    <input type="hidden" id="amountToConvert{{ $advertisment->id }}"
                                                        value="{{ $advertisment->price }}"
                                                        data-ref="convertedAmount{{ $advertisment->id }}">
                                                    <input type="hidden" id="fromCurrency{{ $advertisment->id }}"
                                                        value="{{ $advertisment->getCurrency->symbol }}">

                                                    @php
                                                    $slug=$advertisment->getCategorySlugAttribute();
                                                    @endphp

                                                    <select
                                                        class="form-control bitcoinselect select2-multiple-convertor"
                                                        name="sort" aria-label="Default select example"
                                                        data-id={{ $advertisment->id }}>
                                                        @foreach ($json['allCurrency'] as $currency)
                                                            <option value="{{ $currency->symbol }}"
                                                                title="{{ $currency->image }}"
                                                                {{ $currency->symbol == 'BTC' ? 'selected=""' : '' }}>
                                                                {{ $currency->symbol }}</option>
                                                        @endforeach

                                                    </select>
                                                    <h6 id="convertedAmount{{ $advertisment->id }}">
                                                        {{ $advertisment->converted_amount }}</h6>
                                                </div>

                                                <ul class="accptableCoins">

                                            <h6>
                                                {{$slug == 'sale'?__('words.Accept'):__('words.Pay With')}}
                                            </h6>
                                                    @foreach ($advertisment->methods as $method)
                                                        <li class="coinsItems">
                                                            <a href="javascript:void(0);" class="coinsLinks">
                                                                @if (!empty($method->image))
                                                                <img src="{{ $method->image }}" class="img-fluid">
                                                                @else
                                                                <span class="{{ count($advertisment->methods) > '3' ? 'otherCurrencyClass' : '' }}">{{ $method->title }}</span>
                                                                @endif
                                                            </a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                                <h5 class="fiattext_">
                                                    @if ($advertisment->is_accept_fiat == \App\Models\Advertisment::IS_ACCEPT_FIAT_TRUE)
                                                        <img src="{{ asset('frontend/img/fiatImg.svg') }}"
                                                            class="img-fluid" alt="fiat money"> {{ __('detail.Fiat Money') }}
                                                    @endif

                                                </h5>
                                            </div>

                                            <div class="d-flex justify-content-center">
                                                @if (empty($advertisment->checkAllowChat()))
                                                    <a class="cardBtn" onclick="noChatUser(true)" >
                                                        <i class="far fa-comment-dots img-fluid" style="color: black;"></i>
                                                        {{ __('words.Chat with seller') }}
                                                    </a>
                                                @else

                                                    <a href="{{route('chat.index',['id' => encrypt($advertisment->id)])}}"
                                                    class="cardBtn">
                                                        <i class="far fa-comment-dots img-fluid" style="color: black;"></i>
                                                        {{ __('words.Chat with seller') }}
                                                    </a>
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p class="nofound"> {{ __('words.No data found') }}</p>
                            @endforelse
                        </div>
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div style="display: flex; justify-content: center;">
                            <img src="{{ asset('images/home-loader.gif') }}" alt="loader" class="loader" style="text-align: center;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Feature Section -->
    <!-- Start Ads Section -->
    <section class="adsSection">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <img src="{{ asset('frontend/img/ads1.png') }}" class="img-fluid adsImg" alt="ads image">
                </div>
                <div class="col-md-8 text-center">
                    <h4 class="subheadOuter_ mb-4">{{ __('words.Earn cash by selling or Find anything you desire') }}
                    </h4>
                    <a href="{{ route('category.list', ['id' => encrypt(\App\Models\Category::first()->id)]) }}"
                        class="primary_btn browseBtn language{{ $target }}">{{ __('words.Browse Ads') }}</a>
                    <a href="{{ url('advertisment-create') }}"
                        class=" homepostAdd secondary_btnOuter">{{ __('words.Post Ads') }}</a>

                </div>
                <div class="col-md-2">
                    <img src="{{ asset('frontend/img/ads2.png') }}" class="img-fluid adsImg" alt="ads image">
                </div>
            </div>
        </div>
    </section>
    <!-- End Ads Section -->
    <input type="hidden" value="{{!empty(auth()->user()->password) ? 0 :1}}" id="socialPassword">
    <input type="hidden" value="{{!empty($forsociallogin) ? $forsociallogin : 0}}" id="isSocialLogin">
    <input type="hidden" value="{{!empty($issellertype) ? $issellertype : 0}}" id="isSeller">
    {{-- {{dd(request())}} --}}
    {{-- start Request modal after adding brand --}}
    @if(session('socialLogin'))
        <div class="modal modalCustom fade" data-role ="simsism" id="socioLoginSuccessModal" aria-hidden="true" aria-labelledby="deactiveMain" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal_body">
                        <span class="chechBg_">
                            <img src="{{ asset('frontend/img/checkbg.svg') }}" class="img-fluid" alt="check icon">
                        </span>
                        <h5 class="mb-2 payHead_">{{__("words.We have sent a password set link to your email.")}}</h5>
                        <p class="paypara_">{{__("words.please set your password.")}}</p>
                        <button class="block-button-text mt-3" id="block-button">
                            <a href="javascript:void();" onclick="$('#socioLoginSuccessModal').modal('hide')">{{__("words.Done")}}</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(document).ready(function(e) {
                if($('#isSeller').val()==1)
                $('#socioLoginSuccessModal').modal('show');

                // Set the item in sessionStorage to indicate the modal has been shown
                sessionStorage.setItem('socialLogin', '0');

                // Hide the modal after 4 seconds
                setTimeout(function(e) {
                    $('#socioLoginSuccessModal').modal('hide');
                }, 4000);
            });

        </script>
    @endif

    @php
        if(auth()->user())
        session()->forget('socialLogin');
    @endphp
    {{-- end Request modal after adding brand --}}

    <!-- Start No Chat User Modal -->
    <div class="modal modalCustom deleteProfile fade" id="noChatUserModal" aria-hidden="true"
        aria-labelledby="deactiveMain" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content notranslate">
                <div class="model_header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal_body">


                    <h5 class="alertMessage"></h5>


                    <div class="deletepropbtn">

                        <button class="cancel-button-text logout-btn" id="block-button" type="button"
                            class="btn btn-secondary" data-bs-dismiss="modal" ss>
                            <a href="javascript:void(0)">{{ __('words.Ok') }}</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" value="{{__("words.You can't chat with yourself")}}" id="noChatuserText">

    <!-- End No Chat User Modal-->

    <!-- Start App Section -->
    <section class="appSec">
        <div class="container">
            <div class="appContainer">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <img src="{{ asset('frontend/img/mobileScreen.png') }}" class="img-fluid appleftImg" alt="app image">
                    </div>
                    <div class="col-md-6">
                        <div class="appTextContainer">
                            <h3>{{ __('words.Try The') }} <strong class="fw-600">{{ __('words.Ambayo App') }}</strong></h3>
                            <p class="appSubtxt">
                                {{ __('words.Buy, sell and find just about anything using the app on your mobile') }}
                            </p>
                            <p class="highlightTxt">{{ __('words.Download The Mobile App Today.') }}</p>
                            <div class="browserDetails">
                                <div class="browserDetailsLeft">
                                    <h4 class="titlt_subhead_">{{ __('words.For Buyer') }}</h4>
                                    <div class="storeBtns">
                                        <button class="storeBtn">
                                            <i class="fab fa-app-store img-fluid"></i>
                                            {{ __('words.App Store') }}
                                        </button><br>
                                        <button class="storeBtn">
                                            <i class="fab fa-google-play img-fluid"></i>
                                            {{ __('words.Play Store') }}
                                        </button>
                                    </div>
                                </div>
                                <div class="browserDetailsRight">
                                    <h4 class="titlt_subhead_">{{ __('words.For Seller') }}</h4>
                                    <div class="storeBtns">
                                        <button class="storeBtn">
                                            <i class="fab fa-app-store img-fluid"></i>
                                            {{ __('words.App Store') }}
                                        </button><br>
                                        <button class="storeBtn">
                                            <i class="fab fa-google-play img-fluid"></i>
                                            {{ __('words.Play Store') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End App Section -->
</main>

<!-- Start Footer Section -->
@push('page_script')
    <script src="{{ asset('js/pages/advertisment/currencyConvert.js') }}"></script>
    <script>
        $(document).on('click', '.nav-item', function() {
            let slug = $(this).data('slug');
            let url = site_url + '?slug=' + slug;
            $.get(url, function(response) {
                $('#profile').html(response.view);
            });
        })
        $("img").each(function () {
        // Check if the 'alt' attribute is missing or empty
        if (!$(this).attr("alt") || $(this).attr("alt").trim() === "") {
            // Add a default value for the 'alt' attribute
            $(this).attr("alt", "icon");
        }
    });
    </script>

    <script>
        function noChatUser($flag = false) {
            if ($flag) {
                $('.alertMessage').text($('#noChatuserText').val());
                $('#noChatUserModal').modal('show');
            }

        }
        
    </script>
@endpush
<!-- End Footer Section -->