@extends('site.layouts.master')

@section('title')
    <title>{{ __('site.live_auction') }}</title>
@endsection
@section('metatags')
    <meta name="description" content="{{ $description??'' }}">
    <link rel="canonical" href="{{str_replace('public/','',url()->current())}}">
    <link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
    href="@if(app()->getLocale() == 'en' && str_contains(url()->current(),'/en/')){{str_replace('/en/','/ar/',str_replace('public/','',url()->current()))}}@else{{str_replace('/ar/','/en/',str_replace('public/','',url()->current()))}}@endif">
    <link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif" href="{{str_replace('public/','',url()->current())}}">
@endsection
@section('content')
    <div class="bg-f9f9f9 py-3">
        <div class="bg-yellow px-4 py-3 d-lg-flex justify-content-lg-between align-items-lg-center">
            <p class="SF16_19Regular SF18_21Regular-lg text-3b3b3b mb-lg-0">@lang('site.LAST CHANCE TO BID')</p>
            @php
                $weeks = Carbon\Carbon::parse($auction->auction_end_date)->diffInWeeks(now());
                if ($weeks > 0) {
                    $totalDays = Carbon\Carbon::parse($auction->auction_end_date)->diffInDays(now());
                    $days = $totalDays % 7;
                    $totalHours = Carbon\Carbon::parse($auction->auction_end_date)->diffInHours(now());
                    $hours = $totalHours % ($totalDays * 24);
                    $minutes = Carbon\Carbon::parse($auction->auction_end_date)->diffInMinutes(now()) % ($totalHours * 60);
                }
            @endphp
            <p class="SF16_19Regular SF18_21Regular-lg text-3b3b3b mb-0">@lang('site.End In') <span
                    class="SF16_19Light SF18_21Light-lg mx-2">{{ $weeks ?? 0 }}
                    @lang('site.Weeks') {{ $days ?? 0 }} @lang('site.Days') {{ $hours ?? 0 }} @lang('site.Hours')
                    {{ $minutes ?? 0 }} @lang('site.Minutes')</span></p>
        </div>
        <div class="d-lg-flex justify-content-lg-between">
            <div class="col-lg-8">
                <div class="px-3 my-3">
                    <p class="SF14_16Light SF20_24Light-lg text-3b3b3b my-3 text-uppercase mb-0">
                        {{ date('d M Y', strtotime($auction->date)) . ' - ' . date('d M Y', strtotime($auction->auction_end_date)) }}
                    </p>
                </div>
                <div>
                    <img loading="lazy" class="w-100 h-1000 vh-lg-60 img-fluid"
                        src="@if ($property->images->first()) {{ $property->images->first()->full_url }} @else {{ asset('new_theme/image_notfound.webp') }} @endif"
                        alt="{{ $property->images->first()->meta ?? 'image' }}" loading="lazy">
                </div>
                <div>
                    <div class="d-flex justify-content-around align-items-center my-2">
                        @foreach ($property->images as $i => $image)
                            @if ($loop->iteration != 1 && $loop->iteration < 6)
                                <a href="" class="col-3 px-1 text-decoration-none" onclick="event.preventDefault()"
                                    data-bs-toggle="modal" data-bs-target="#exampleModal">
                                    <img loading="lazy" class="rounded-3 w-100 h-100"
                                        src="@if ($image->full_url) {{ $image->full_url }} @else {{ asset('new_theme/image_notfound.webp') }} @endif"
                                        alt="{{ $image->meta ?? 'image' }}" loading="lazy">
                                </a>
                            @endif
                        @endforeach
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog h-100" role="document" style="max-width:none;margin:0;">
                            <div class="modal-content h-100 bg-dark">
                                <div class="modal-header border-0">
                                    <button type="button" class="close bg-transparent border-0" data-bs-dismiss="modal"
                                        aria-label="Close">
                                        <span aria-hidden="true" class="text-white h3 my-0">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
                                        class="swiper mySwiper2 vh-80 w-90 w-lg-75">
                                        <div class="swiper-wrapper">
                                            @foreach ($property->images as $i => $image)
                                                <div class="swiper-slide">
                                                    <img class="w-100 h-100 rounded-3" src="{{ $image->full_url }}" />
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                    </div>
                                    <div thumbsSlider="" class="swiper mySwiper h-auto">
                                        <div class="swiper-wrapper">
                                            @foreach ($property->images as $i => $image)
                                                <div class="swiper-slide">
                                                    <img class="m-2 rounded-3 w-100" src="{{ $image->full_url }}"
                                                        style="height:95px" />
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-2">
                    <div class="card border-0 shadow-box my-3 p-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <p>
                                @if ($property->location->governorate->name)
                                    <a class="text-3b3b3b time_text SF22_26Regular-lg text-decoration-none"
                                        href="{{ url('/' . app()->getLocale() . '/govs/' . urlencode(str_replace(' ', '-', $property->location->governorate->name))) }}">{{ $property->location->governorate->name }}</a>
                                @endif
                                @if ($property->location->city->name)
                                    <a class="text-3b3b3b time_text SF22_26Regular-lg text-decoration-none"
                                        href="{{ url('/' . app()->getLocale() . '/' . urlencode(str_replace(' ', '-', $property->location->governorate->name)) . '/' . urlencode(str_replace(' ', '-', $property->location->city->name))) }}">{{ $property->location->city->name }}</a>
                                @endif
                                @if ($property->location->district->name)
                                    <a class="text-3b3b3b time_text SF22_26Regular-lg text-decoration-none"
                                        href="{{ url('/' . app()->getLocale() . '/' . urlencode(str_replace(' ', '-', $property->location->city->name)) . '/' . urlencode(str_replace(' ', '-', $property->location->district->name))) }}">{{ $property->location->district->name }}</a>
                                @endif
                                @if ($property->location->compound->name)
                                    <a class="text-3b3b3b time_text SF22_26Regular-lg text-decoration-none"
                                        href="{{ url('/' . app()->getLocale() . '/' . urlencode(str_replace(' ', '-', $property->location->city->name)) . '/' . urlencode(str_replace(' ', '-', $property->location->compound->name))) }}">{{ $property->location->compound->name }}</a>
                                @endif
                            </p>
                            <p class="listing_id_red">@lang('site.listing_id') : <span id="id">{{ $property->id }}</span>
                            </p>
                        </div>
                        <div>
                            <h1 class="property_page_title text-3b3b3b m-0">
                                {{ $property->metadata->title }}
                            </h1>
                        </div>
                        <div class="d-flex flex-wrap justify-content-between align-items-center my-3">
                            <div
                                class="d-flex justify-content-center align-items-center light_blue_button SF18_21Medium-lg col-5 col-lg-3 mb-2">
                                <img src="{{ asset('new_theme/bed-alt2.svg') }}" alt="bedroom">
                                <p class="text-3b3b3b mx-2 my-0">{{ $property->options->no_of_bedrooms }}
                                    @lang('site.beds')</p>
                            </div>
                            <div
                                class="d-flex justify-content-center align-items-center light_blue_button SF18_21Medium-lg col-5 col-lg-3 mb-2">
                                <img src="{{ asset('new_theme/hot-tub.svg') }}" alt="bathroom">
                                <p class="text-3b3b3b mx-2 my-0">{{ $property->options->no_of_bathrooms }}
                                    @lang('site.Bathrooms') </p>
                            </div>
                            <div
                                class="d-flex justify-content-center align-items-center light_blue_button SF18_21Medium-lg col-5 col-lg-3 mb-2">
                                <img src="{{ asset('new_theme/svgexport-21 (1).svg') }}" alt="size">
                                <p class="text-3b3b3b mx-2 my-0">
                                    {{ $property->options->size ?? $property->options->surface_area }}
                                    @lang('site.SqFt')
                                </p>
                            </div>
                        </div>
                        <div class="bg-light rounded-3 pt-3 px-3 d-lg-flex justify-content-lg-around">
                            <div class="d-flex flex-lg-column justify-content-between align-items-center my-2">
                                <P class="back_link text-3b3b3b">@lang('site.Property_Types')</P>
                                <P class="SF18_21Medium light_blue">{{ $property->property_type->label }}</P>
                            </div>
                            <div class="d-flex flex-lg-column justify-content-between align-items-center my-2">
                                <P class="back_link text-3b3b3b">@lang('site.Property_Sub_Type')</P>
                                <P class="SF18_21Medium light_blue">
                                    @if (LaravelLocalization::getCurrentLocale() == 'en')
                                        @foreach ($property->subtypes()->pluck('sub_type_name')->toArray() as $subt)
                                            <span class='col-6 px-0 font-weight-bold'>
                                                @if ($loop->iteration > 1)
                                                    ,
                                                @endif
                                                {{ $subt }}
                                            </span>
                                        @endforeach
                                    @else
                                        @foreach ($property->subtypes()->pluck('sub_type_name_ar')->toArray() as $subta)
                                            <span class='col-6 px-0 font-weight-bold'>
                                                @if ($loop->iteration > 1)
                                                    ,
                                                @endif
                                                {{ $subta }}
                                            </span>
                                        @endforeach
                                    @endif
                                </P>
                            </div>
                            <div class="d-flex flex-lg-column justify-content-between align-items-center my-2">
                                <P class="back_link text-3b3b3b">@lang('site.Property_For')</P>
                                <P class="SF18_21Medium light_blue">{{ $property->property_for }}</P>
                            </div>
                            <div class="d-flex flex-lg-column justify-content-between align-items-center my-2">
                                <P class="back_link text-3b3b3b">@lang('site.facing')</P>
                                <P class="SF18_21Medium light_blue">{{ $property->options->facing }}</P>
                            </div>
                            <div class="d-flex flex-lg-column justify-content-between align-items-center my-2">
                                <P class="back_link text-3b3b3b">@lang('site.Finishing_Status')</P>
                                <P class="SF18_21Medium light_blue">{{ $property->options->finishing_status }}</P>
                            </div>
                        </div>
                    </div>
                    <div class="card border-0 shadow-box my-3 pt-3 pb-4 pt-lg-3 px-lg-3 px-2">
                        <div class="d-lg-flex flex-lg-wrap justify-content-lg-between">
                            <div class="d-lg-flex justify-content-lg-between col-lg-12">
                                <p class="light_blue SFBlack22_26 SFBlack26_31-lg text-uppercase">@lang('site.Property_Description')</p>
                                @if (app()->getLocale() == 'en')
                                    <div class="d-none d-lg-block showingButton mt-4 mt-lg-0">
                                        <a href="{{ route('site.brochure', $property->id) }}"
                                            class="search_form_button py-3 px-4 text-decoration-none rounded-3">@lang('site.brochure')</a>
                                    </div>
                                @endif
                            </div>
                            <div class="copy_right SF20_24Regular-lg text-9b9b9b my-3">
                                {!! $property->metadata->description !!}
                            </div>
                            @if (app()->getLocale() == 'en')
                                <div class="d-lg-none showingButton mt-4">
                                    <a href="{{ route('site.brochure', $property->id) }}"
                                        class="search_form_button py-3 px-4 text-decoration-none rounded-3">@lang('site.brochure')</a>
                                </div>
                            @endif
                        </div>
                    </div>
                    @if (!empty($property->metadata->map_link))
                        <div class="card border-0 shadow-box my-3 p-2 p-lg-3">
                            <p class="light_blue SFBlack22_26 SFBlack26_31-lg text-uppercase">@lang('site.Location')</p>
                            <div class="text-center rounded-3 child_control">
                                {!! $property->metadata->map_link !!}
                            </div>
                        </div>
                    @endif
                    @if ($property->features()->count())
                        <div class="card border-0 shadow-box my-3 p-2 p-lg-3">
                            <p class="light_blue SFBlack22_26 SFBlack26_31-lg text-uppercase">@lang('site.PropertyFeatures')</p>
                            <div class="d-flex flex-wrap justify-content-around">
                                @foreach ($property->features as $feature)
                                    <div class="col-3 m-2 text-center">
                                        <div>
                                            <img src="{{ asset('../new_theme/features/' . $feature->name_en . '.svg') }}"
                                                alt="{{ $feature->name_en }}">
                                        </div>
                                        <p class="m-0 SFBold12_14 text-3b3b3b text-wrap">{{ $feature->name }}</p>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            <div class="col-lg-4">
                <div class="px-2">
                    <div class="card border-0 shadow-box my-3 p-3">
                        <p class="SF16_19Bold text-3b3b3b">@lang('site.current_bid')</p>
                        <p class="property-page-price price-commas" id="highestBid"></p>
                        <p class="SF16_19Light text-3b3b3b">@lang('site.estimated_price')</p>
                        <p class="SF20_24Regular text-blue"><span
                                class="price-commas">{{ $property->site_price * 0.8 }}</span>
                            {{ $property->site_currency }}
                            -
                            <span class="price-commas">{{ $property->site_price * 1.2 }}</span>
                            {{ $property->site_currency }}
                        </p>
                        @if (!empty($auction->auction_start_price))
                            <div class="owl-carousel">
                                <p class="m-0 px-3 py-2 border borer-d1d1d1 rounded-2 SF16_19Regular" id="firstSuggest">
                                    {{ $auction->auction_start_price * 1.05 }}</p>
                                <p class="m-0 px-3 py-2 border borer-d1d1d1 rounded-2 SF16_19Regular" id="secondSuggest">
                                    {{ $auction->auction_start_price * 1.1 }}</p>
                                <p class="m-0 px-3 py-2 border borer-d1d1d1 rounded-2 SF16_19Regular" id="thirdSuggest">
                                    {{ $auction->auction_start_price * 1.15 }}</p>
                                <p class="m-0 px-3 py-2 border borer-d1d1d1 rounded-2 SF16_19Regular" id="fourthSuggest">
                                    {{ $auction->auction_start_price * 1.2 }}</p>
                            </div>
                        @endif
                        <div>
                            <div id="alert" class="d-none alert text-center py-2">

                            </div>
                            <form id="bidForm" action="{{ route('site.addBid', $auction->id) }}" method="post">
                                @csrf
                                <div class="form-group">
                                    <input class="form-control evaluatePlaceholder" type="number" name="price"
                                        id="price" placeholder="@lang('site.Enter your bid here')">
                                </div>
                                <div class="form-group my-2">
                                    <input class="form-control btn bg-red SF22_26Bold text-white text-center py-2"
                                        id="submitBid" type="submit" value="@lang('site.submit')">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card border-0 shadow-box my-3 py-3 px-2" id="bids">
                        @foreach ($bidders as $bidder)
                            <div class="d-sm-flex justify-content-between align-items-center">
                                <div class="d-flex justify-content-between">
                                    <p class="SF24_29Bold text-red mb-0">@lang('site.bidder') {{ $bidder->bidder_id }}
                                    </p>
                                    <p class="SF14_16Medium text-3b3b3b mb-0">@lang('site.price')</p>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <p class="text-9b9b9b time_text mt-2">
                                        {{ date('d-m-Y', strtotime($bidder->updated_at)) }} <br> @lang('site.at')
                                        {{ date('g:i A', strtotime($bidder->updated_at)) }}</p>
                                    <p class="SF22_26Bold text-blue mt-2"><span
                                            class="price-commas">{{ $bidder->price }}</span>
                                        {{ $property->site_currency }}</p>
                                </div>
                            </div>
                            <div class="line"></div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(".owl-carousel").owlCarousel({
            autoWidth: true,
            margin: 10,
        });
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
            loop: true,
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            thumbs: {
                swiper: swiper,
            },
        });
        var bids = $('#bids');
        var currency = '<br />
<b>Warning</b>:  Undefined variable $property in <b>/home/nilecp/public_html/resources/views/site/pages/auction/details.blade.php</b> on line <b>330</b><br />
<br />
<b>Warning</b>:  Attempt to read property "options" on null in <b>/home/nilecp/public_html/resources/views/site/pages/auction/details.blade.php</b> on line <b>330</b><br />
<br />
<b>Warning</b>:  Attempt to read property "sale_currency" on null in <b>/home/nilecp/public_html/resources/views/site/pages/auction/details.blade.php</b> on line <b>330</b><br />
';
        setInterval(function() {
            refresh();
        }, 1000 * 20);

        $(document).on("submit", "#bidForm", function(e) {
            e.preventDefault();
            var form = $(this);
            $.ajax({
                url: form.attr("action"),
                method: "post",
                data: form.serialize(),
                success: function(result) {
                    if (result == 'Auction Ended') {
                        $('#alert').removeClass('d-none');
                        $('#alert').addClass('alert-danger');
                        $('#alert').html('<span>@lang('site.Auction Ended')</span>');
                        console.log($('#alert'));
                    } else {
                        if (result == 'done') {
                            $('#alert').removeClass('d-none');
                            $('#alert').addClass('alert-success');
                            $('#alert').html('<span>@lang('site.Your Bid Was Added Successfully')</span>');
                            $('#highestBid').html($(['name="price"']).val());
                            refresh();
                            setInterval(function() {
                                $('#alert').addClass('d-none');
                                $('#alert').removeClass('alert-success');
                            }, 1000 * 20);
                        } else {
                            $('#alert').removeClass('d-none');
                            $('#alert').addClass('alert-danger');
                            $('#alert').html('<span>@lang('site.The Price You Bidded Not Higher Than Current One')</span>');
                            refresh();
                            setInterval(function() {
                                $('#alert').addClass('d-none');
                                $('#alert').removeClass('alert-danger');
                            }, 1000 * 5);
                        }
                    }
                },
                error: function(errors) {
                    console.log("errors", errors);
                },
            });
        });

        function refresh() {
            var bids = $('#bids');
            var currency = '<br />
<b>Warning</b>:  Undefined variable $property in <b>/home/nilecp/public_html/resources/views/site/pages/auction/details.blade.php</b> on line <b>379</b><br />
<br />
<b>Warning</b>:  Attempt to read property "options" on null in <b>/home/nilecp/public_html/resources/views/site/pages/auction/details.blade.php</b> on line <b>379</b><br />
<br />
<b>Warning</b>:  Attempt to read property "sale_currency" on null in <b>/home/nilecp/public_html/resources/views/site/pages/auction/details.blade.php</b> on line <b>379</b><br />
';
            $.ajax({
                url: '{{ route('site.bidsRefresh', $auction->id) }}',
                method: "get",
                success: function(result) {
                    bids.empty();
                    console.log(result);
                    result.forEach(el => {
                        var formattedDate = new Date(el.updated_at);
                        var h = formattedDate.toLocaleString('en-US', {
                            hour: 'numeric',
                            minute: 'numeric',
                            second: 'numeric',
                            hour12: true
                        })
                        var d = formattedDate.getDate();
                        var m = formattedDate.getMonth();
                        m += 1; // JavaScript months are 0-11
                        var y = formattedDate.getFullYear();
                        sdate = h;
                        ddate = d + '-' + m + '-' + y;
                        bids.append(
                            '<div class="d-sm-flex justify-content-between align-items-center">\
                                                                                <p class="h5 text-white">@lang('site.bidder') ' +
                            el
                            .bidder_id +
                            '</p>\
                                                                                <p class="fontbig3 text-white"><strong>@lang('site.price'):</strong> ' +
                            el
                            .price +
                            ' ' + currency + '</p>\
                                                                                <p class="custlabel text-white"> ' +
                            ddate +
                            ' <br> ' +
                            sdate + '</p>\
                                                                                </div>');
                    });
                },
                error: function(errors) {
                    console.log("errors", errors);
                },
            });
        }
    </script>
@endsection