@extends('layout')
@section('title')
    <title>{{ html_decode($car->seo_title) }}</title>
    <meta name="title" content="{{ html_decode($car->seo_title) }}">
    <meta name="description" content="{{ html_decode($car->seo_description) }}">
@endsection

@section('body-content')

<main>
    <!-- banner-part-start  -->

    <section class="inner-banner">
    <div class="inner-banner-img" style=" background-image: url({{ asset($breadcrumb) }}) ;"></div>
        <div class="container">
        <div class="col-lg-12">
            <div class="inner-banner-df">
                <h1 class="inner-banner-taitel">{{ html_decode($car->title) }}</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('translate.Home') }}</a></li>
{{--                        <li class="breadcrumb-item active" aria-current="page">{{ __('translate.Car Details') }}</li>--}}
                    </ol>
                </nav>
            </div>
            </div>
        </div>
    </section>
    <!-- banner-part-end -->

    <section class="inventory-details py-50px" style="margin-top: 40px;">

        <div class="container">
              @if($dealer)
            <div class="pinfo">
        <div class="row">
           
            <div class="col-md-6 col-10">

                <div class="auto-sales-item-inner">
                    <div class="row">

                  <div class="col-md-2 col-5">
                    <div class="auto-sales-logo">
                        <a href="{{ route('dealer', $dealer->username) }}"><img src="{{ asset($dealer->image) }}" alt="logo"></a>
                    </div>
                  </div>
                        <div class="col-md-10 col-7">
                    <div class="auto-sales-text-item">
                        <div class="auto-sales-text-left">
                            <h3>
                                <a href="{{ route('dealer', $dealer->username) }}" style="color: #fff">
                                {{ html_decode($dealer->name) }}
                                </a>
                                @php
                                    $kyc = Modules\Kyc\Entities\KycInformation::where('user_id',$dealer->id)->where('status',1)->first();
                                @endphp
                                @if($kyc)
                                    <span  class="varified-badge">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.007 2.10377C8.60544 1.65006 7.08181 2.28116 6.41156 3.59306L5.60578 5.17023C5.51004 5.35763 5.35763 5.51004 5.17023 5.60578L3.59306 6.41156C2.28116 7.08181 1.65006 8.60544 2.10377 10.007L2.64923 11.692C2.71404 11.8922 2.71404 12.1078 2.64923 12.308L2.10377 13.993C1.65006 15.3946 2.28116 16.9182 3.59306 17.5885L5.17023 18.3942C5.35763 18.49 5.51004 18.6424 5.60578 18.8298L6.41156 20.407C7.08181 21.7189 8.60544 22.35 10.007 21.8963L11.692 21.3508C11.8922 21.286 12.1078 21.286 12.308 21.3508L13.993 21.8963C15.3946 22.35 16.9182 21.7189 17.5885 20.407L18.3942 18.8298C18.49 18.6424 18.6424 18.49 18.8298 18.3942L20.407 17.5885C21.7189 16.9182 22.35 15.3946 21.8963 13.993L21.3508 12.308C21.286 12.1078 21.286 11.8922 21.3508 11.692L21.8963 10.007C22.35 8.60544 21.7189 7.08181 20.407 6.41156L18.8298 5.60578C18.6424 5.51004 18.49 5.35763 18.3942 5.17023L17.5885 3.59306C16.9182 2.28116 15.3946 1.65006 13.993 2.10377L12.308 2.64923C12.1078 2.71403 11.8922 2.71404 11.692 2.64923L10.007 2.10377ZM6.75977 11.7573L8.17399 10.343L11.0024 13.1715L16.6593 7.51465L18.0735 8.92886L11.0024 15.9999L6.75977 11.7573Z">

                                                </path>
                                                </svg>
                                            </span>
                                @endif
                            </h3>
                            <p>{{ __('translate.Member Since') }} {{ $dealer->created_at->format('F Y') }} </p>
                        </div>
                        <div class="auto-sales-text-right">
                            <h6>{{ __('translate.Total Cars') }} {{ $dealer->total_car }}</h6>
                            <p>
                                        <span>
                                            <svg width="53" height="11" viewBox="0 0 53 11" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                        d="M5.3 0L6.48992 3.80041H10.3406L7.22534 6.14919L8.41526 9.94959L5.3 7.60081L2.18474 9.94959L3.37466 6.14919L0.2594 3.80041H4.11007L5.3 0Z" />
                                                <path
                                                        d="M15.8996 0L17.0895 3.80041H20.9402L17.8249 6.14919L19.0149 9.94959L15.8996 7.60081L12.7843 9.94959L13.9743 6.14919L10.859 3.80041H14.7097L15.8996 0Z" />
                                                <path
                                                        d="M26.4992 0L27.6891 3.80041H31.5398L28.4246 6.14919L29.6145 9.94959L26.4992 7.60081L23.384 9.94959L24.5739 6.14919L21.4586 3.80041H25.3093L26.4992 0Z" />
                                                <path
                                                        d="M37.1008 0L38.2907 3.80041H42.1414L39.0261 6.14919L40.216 9.94959L37.1008 7.60081L33.9855 9.94959L35.1754 6.14919L32.0602 3.80041H35.9109L37.1008 0Z" />
                                                <path
                                                        d="M47.7004 0L48.8903 3.80041H52.741L49.6257 6.14919L50.8157 9.94959L47.7004 7.60081L44.5851 9.94959L45.7751 6.14919L42.6598 3.80041H46.5105L47.7004 0Z" />
                                            </svg>
                                        </span>
                                ({{ $total_dealer_rating }})
                            </p>
                        </div>
                    </div>
                        </div>
                    </div>
                </div>
            </div>
          
            <div class="col-md-6 text-right col-2">
                @if($dealer->instagram)
                <a target="_blank" href="https://www.instagram.com/{{ $dealer->instagram }}" class="insta"><i class="fa-brands fa-instagram"></i> </a>
                @endif
            </div>
             
        </div>
        </div>
 @endif
            <div class="ownerbox sbox" data-aos="fade-up"
                 data-aos-delay="0.1">
                <h4 class="box-head"><i class="fa-regular fa-user"></i> {{ __('translate.Owner Info') }}</h4>
                <ul>
                    <li>
                        <i class="fa-regular fa-user"></i>  {{ __('translate.Owner Name') }}: <span>{{ $car->owner_name }}</span></li>

                    @if($car->owner_instagram)
                        <li><i class="fa-brands fa-instagram"></i> {{ __('translate.Owner Instagram') }}: <span><a target="_blank" href="https://www.instagram.com/{{ $car->owner_instagram }}"> Instagram</a> </span></li>
                    @endif
                    <li><i class="fa-regular fa-copyright"></i> {{ __('translate.Brand') }}: <span>{{ $car?->brand?->name }}</span></li>
                    <li><i class="fa-regular fa-calendar-days"></i> {{ __('translate.Year') }}: <span> {{ html_decode($car->year) }}</span></li>

                </ul>
            </div>

            <div class="sbox" data-aos="fade-up"
                 data-aos-delay="50">
                <h4 class="box-head"><i class="fa-regular fa-file-lines"></i> {{ __('translate.Description Overview') }}</h4>

                {!! clean(html_decode($car->description)) !!}

            </div>

            <div class="sbox" data-aos="fade-up"
                 data-aos-delay="100">
                <h4 class="box-head"><i class="fa-solid fa-images"></i> {{ __('translate.Car Gallery') }}</h4>
                <div class="boximg">
                    <div class="row">
                @foreach ($galleries as $gallery)
                   <div class="col-md-6 mb20 col-12">
                       <a class="my-image-links" data-gall="gallery01" href="{{ asset($gallery->image) }}">   <img src="{{ asset($gallery->image) }}" alt="{{ html_decode($car->title) }}"></a>
                   </div>
                @endforeach
                </div>
                </div>

            </div>
                @if ($reviews->count() > 0)
                <div class="sbox" data-aos="fade-up"
                     data-aos-delay="150">
                    <h4 class="box-head"><i class="fa-regular fa-comments"></i>  {{ __('translate.Car Reviews') }}</h4>


                                    @foreach ($reviews as $review)
                                        <div class="reviews">
                                            <div class="reviews-item">

                                                <ul class="icon">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        @if ($review->rating < $i)
                                                            <li><span><i class="fa-regular fa-star"></i></span></li>
                                                        @else
                                                            <li><span><i class="fa-solid fa-star"></i></span></li>
                                                        @endif
                                                    @endfor
                                                </ul>

                                                <div class="text">
                                                    <h6>{{ $review->created_at->format('M d Y') }}</h6>
                                                </div>
                                            </div>

                                            <p>
                                                {{ html_decode($review->comment) }}
                                            </p>

                                            <div class="reviews-inner">
                                                <div class="reviews-inner-item">
                                                    <div class="reviews-inner-img">
                                                        <img src="{{ asset($review?->user?->image) }}" alt="img">
                                                    </div>

                                                    <div class="reviews-inner-text">
                                                        <h3>{{ html_decode($review?->user?->name) }}</h3>
                                                        <p>{{ html_decode($review?->user?->designation) }}</p>
                                                    </div>
                                                </div>


                                            </div>


                                        </div>
                                    @endforeach

                </div>
                @endif


            <div class="sbox" data-aos="fade-up"
                 data-aos-delay="150">
                <h4 class="box-head"><i class="fa-regular fa-user"></i>   {{ __('translate.Write Your Review') }}</h4>
                <div class="write-your-review-item">
                    <div class="write-your-review-stars">
                        <ul class="icon">
                            <li><i onclick="carReview(1)" data-rating="1" class="car_rat fa-solid fa-star"></i></li>
                            <li><i onclick="carReview(2)" data-rating="2" class="car_rat fa-solid fa-star"></i></li>
                            <li><i onclick="carReview(3)" data-rating="3" class="car_rat fa-solid fa-star"></i></li>
                            <li><i onclick="carReview(4)" data-rating="4" class="car_rat fa-solid fa-star"></i></li>
                            <li><i onclick="carReview(5)" data-rating="5" class="car_rat fa-solid fa-star"></i></li>

                        </ul>
                        <span>(5.0)</span>
                    </div>

                    <form method="POST" action="{{ route('user.store-review') }}">

                        @csrf

                        <input type="hidden" name="agent_id" value="{{ $car->agent_id }}">
                        <input type="hidden" name="car_id" value="{{ $car->id }}">
                        <input type="hidden" id="car_rating" name="rating" value="5">

                        <div class="form-item">
                            <div class="form-inner">
                                <label class="form-label">{{ __('translate.Review') }} <span>*</span> </label>
                                <textarea name="comment" class="form-control" id="review" rows="5" placeholder="{{ __('translate.Write here') }}"></textarea>
                            </div>

                        </div>

                        @if($google_recaptcha->status==1)
                            <div class="form-item">
                                <div class="form-inner">
                                    <div class="g-recaptcha" data-sitekey="{{ $google_recaptcha->site_key }}"></div>
                                </div>

                            </div>
                        @endif

                        <button type="submit" class="thm-btn-two">{{ __('translate.Submit Review') }}</button>

                    </form>

                </div>

            </div>

    </div>
    </section>

    <!-- Inventory Details-part-start -->

  


    <!-- Inventory Details-part-end -->







</main>

@endsection


@push('js_section')

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <script>
        "use strict";

        function carReview(rating){
            $(".car_rat").each(function(){
                var car_rat = $(this).data('rating')
                if(car_rat > rating){
                    $(this).removeClass('fa-solid fa-star').addClass('fa-regular fa-star');
                }else{
                    $(this).removeClass('fa-regular fa-star').addClass('fa-solid fa-star');
                }
            })
            $("#car_rating").val(rating);
        };
        new VenoBox({
            selector: '.my-image-links',
            numeration: true,
            infinigall: true,
            share: true,
            maxWidth: '1200px',
            spinner: 'rotating-plane'
        });
    </script>


    <script>
        "use strict";

        let currencyPosition = "{{ Session::get('currency_position') }}";
        let currencyIcon = "{{ Session::get('currency_icon') }}";

        function calculateMonthlyPayment(loanAmount, interestRate, loanTermYears)
        {
            let monthlyInterestRate = (interestRate / 100) / 12;
            let totalPayments = loanTermYears * 12;

            let monthlyPayment = loanAmount * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, totalPayments))
                / (Math.pow(1 + monthlyInterestRate, totalPayments) - 1);

            return monthlyPayment;
        }

        $("#calculate_btn").on("click", function(e){
            e.preventDefault();

            let loanAmount = $("#loan_amount").val();
            let interestRate = $("#interest_rate").val();
            let loanTermYears = $("#total_year").val();

            if(!loanAmount){
                toastr.error("{{ __('translate.Please fill out the form') }}")
                return;
            }

            if(!interestRate){
                toastr.error("{{ __('translate.Please fill out the form') }}")
                return;
            }

            if(!loanTermYears){
                toastr.error("{{ __('translate.Please fill out the form') }}")
                return;
            }

            let finalPayment = calculateMonthlyPayment(loanAmount, interestRate, loanTermYears)
            finalPayment = finalPayment.toFixed(2)
            finalPayment = finalPayment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

            let appendCurrency = '';

            if(currencyPosition == 'before_price'){
                appendCurrency = `${currencyIcon}${finalPayment}`
            }else if(currencyPosition == 'before_price_with_space'){
                appendCurrency = `${currencyIcon} ${finalPayment}`
            }else if(currencyPosition == 'after_price'){
                appendCurrency = `${finalPayment}${currencyIcon}`
            }else if(currencyPosition == 'after_price_with_space'){
                appendCurrency = `${finalPayment} ${currencyIcon}`
            }

            $("#monthly_payment").html(appendCurrency);
        })

        $("#loan_amount").on("keyup", function(e){
            let enteredValue = e.target.value;
            let numericValue = enteredValue.replace(/[^0-9.]/g, '');
            $(this).val(numericValue);
        })

        $("#interest_rate").on("keyup", function(e){
            let enteredValue = e.target.value;
            let numericValue = enteredValue.replace(/[^0-9.]/g, '');
            $(this).val(numericValue);
        })

        $("#total_year").on("keyup", function(e){
            let enteredValue = e.target.value;
            let numericValue = enteredValue.replace(/[^0-9.]/g, '');
            $(this).val(numericValue);
        })

        $("#reset_btn").on("click", function(){
            $("#loan_amount").val('');
            $("#interest_rate").val('');
            $("#total_year").val('');

            let appendCurrency = '';

            if(currencyPosition == 'before_price'){
                appendCurrency = `${currencyIcon}0.00`
            }else if(currencyPosition == 'before_price_with_space'){
                appendCurrency = `${currencyIcon} 0.00`
            }else if(currencyPosition == 'after_price'){
                appendCurrency = `0.00${currencyIcon}`
            }else if(currencyPosition == 'after_price_with_space'){
                appendCurrency = `0.00 ${currencyIcon}`
            }

            $("#monthly_payment").html(appendCurrency);

        })

    </script>


@endpush