@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- ---------- order-complete ----------- -->
        <section class="order-complete">
            <div class="container">
                <form action="{{ route('web.checkout.process', ['product' => $product->id]) }}" method="post">
                    @csrf
                    <div class="info-card">
                        <h5 class="card-title"> {{ $product->currentDescription->title ?? "" }} <span
                                class="main-color"> ( #{{ $product->uuid }} ) </span>
                        </h5>
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="main-img">
                                    <img src="{{getImage($product->image)}}"
                                         alt="{{ $product->currentDescription->title ?? "" }}"
                                         class="img_cover">
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="inf">
                                    <div class="user-account">
                                        <div class="avatar">
                                            <img src="{{getImage($product->user->photo ?? "")}}"
                                                 alt="{{ $product->user->name ?? "" }}"
                                                 class="img_cover">
                                        </div>
                                        <div class="cont">
                                            <small> {{ __('products::products.account_holder') }} </small>
                                            <p> {{ $product->user->name ?? "" }} </p>
                                            <div class="rate">
                                                <div class="stars">
                                                    @for($r = 1; $r <= 5; $r++)
                                                        @if(($product->user->ratings_info->avg_ratings ?? 0) >= $r)
                                                            <i class="fas fa-star"></i>
                                                        @else
                                                            <i class="fal fa-star"></i>
                                                        @endif
                                                    @endfor
                                                </div>
                                                <a href="{{ route('web.users.ratings', $product->user_id) }}" target="_blank" class="rate-lnk">
                                                    ( {{ __('general.reviews_number', ['number' => $product->user->ratings_info->ratings_count ?? 0]) }} )
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <h5 class="mb-2">
                                        {{ __('products::products.price') }} :
                                        <strong class="main-color product-price">
                                            {{ $productCurrentPriceCurrency }}
                                        </strong>
                                    </h5>
                                    <div class="main-txt col-lg-9">
                                        {!! Str::limit($product->currentDescription->description ?? "", 300) !!}
                                    </div>
                                    <div class="platforms">
                                        <h6> {{ __('products::products.platforms') }} </h6>
                                        <div class="items">
                                            @foreach($product->platformNames as $platformName)
                                                <span class="item"> {{ $platformName }} </span>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="delevery-box">
                            <p>
                                <i class="fal fa-clock me-2"></i> {{ __('products::products.delivery_within', ['hours' => $product->delivery_time_to]) }}
                            </p>
                        </div>
                    </div>
                    <div class="info-card">
                        <h5 class="card-title"> {{ __('orders::orders.your_notes') }} </h5>
                        <div class="form-box">
                            <div class="form-group">
                                <h6> {{ __('orders::orders.write_your_notes') }} </h6>
                                <textarea name="notes" rows="5"
                                          class="form-control mt-3 {{ $errors->has('notes') ? 'is-invalid' : '' }}"
                                          placeholder="{{__('orders::orders.notes')}}">{{ old('notes', $firstStepData['notes'] ?? '') }}</textarea>
                            </div>
                        </div>
                        <div class="form-box mt-4 row">
                            <div class="form-group col-9">
                                <h6> {{ __('orders::orders.coupon') }} </h6>
                                <input type="text"
                                       name="coupon"
                                       value="{{ old('coupon') }}"
                                       class="form-control mt-3 {{ $errors->has('coupon') ? 'is-invalid' : '' }}"
                                       placeholder="{{__('orders::orders.coupon')}}" autocomplete="off"/>
                                {{-- , $firstStepData['coupon'] ?? '' --}}
                            </div>
                            <div class="col-2 d-flex align-items-center justify-content-center">
                                <button type="button" class="butn" id="applyCoupon">
                                    <span>{{ __('orders::orders.apply') }}</span>
                                </button>
                            </div>
                            <div class="col-1 d-flex align-items-center justify-content-center">
                                <div id="couponResult"></div>
                            </div>
                        </div>
                        <div class="text-center mt-5">
                            <div class="butn-presv">
                                <button class="butn custom-submit-btn" type="submit">
                                    <span>
                                        <i class="fat fa-shopping-bag me-2"></i>
                                        {{ __('orders::orders.complete_payment') }}
                                    </span>
                                </button>
                            </div>
                            <small class="text-success mt-4 d-block">
                                {{ __('orders::orders.complete_payment_you_agreed') }}
                            </small>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        $(document).ready(function () {
            let couponInput = $('input[name="coupon"]');

            function applyCoupon() {
                let coupon = couponInput.val().trim();
                if (coupon) {
                    $.ajax({
                        url: '{{ route('web.coupons.check') }}',
                        type: 'POST',
                        data: {
                            coupon: coupon,
                            product_id: '{{ $product->id }}',
                        },
                        success: function (response) {
                            if (response?.other_data?.coupon_result) {
                                $('#couponResult').html(response.other_data.coupon_result);
                            }

                            if (response?.prices_by_currency?.subtotal) {
                                $('.product-price').text(response.prices_by_currency.subtotal);
                            }
                        },
                        error: function (xhr, status, error) {
                            displayAjaxError(xhr);
                        }
                    });
                }
            }

            // Check if coupon input has a value on page load, and apply if it does
            if (couponInput.val().trim()) {
                applyCoupon();
            }

            // Trigger AJAX when clicking "Apply Coupon" button
            $(document).on('click', '#applyCoupon', function () {
                applyCoupon();
            });
        });
    </script>
@endpush