@extends('web.layouts.layout')

@section('content')

    @php
        $otherData = $orderSummary['other_data'] ?? [];
        $pricesByCurrency = $orderSummary['prices_by_currency'] ?? [];
        $parsedPrices = $orderSummary['parsed_prices'] ?? [];
    @endphp
    <main>
        <!-- Start section -->
        <section class="cart_pg section checkout-page-wrapper">
            <div class="container">
                <h2 class="title_w_shape w-fit mx-auto mb-5"><span>  {{ $title }}  </span></h2>

                <form method="post" action="{{ route('web.checkout.store') }}" class="form-submit-loader2">
                    @csrf
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="box">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>{{ __('carts::carts.item_name') }}</th>
                                            <th>{{ __('products::products.qty') }}</th>
                                            <th>{{ __('products::products.price') }}</th>
                                            <th>{{ __('carts::carts.total') }}</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($otherData['cart_details'] as $rowId => $item)
                                            @php
                                                $orderDetail = $item['order_detail'];
                                                $product = $item['product'];
                                            @endphp
                                            <tr class="cart-item cart-item-{{ $rowId }}"
                                                data-id="{{ $orderDetail['product_id'] ?? 0 }}">
                                                <td>{{ $product->currentDescription->title ?? "" }}</td>
                                                <td>
                                                    <div class="qty-container">
                                                        <button class="qty-btn-minus btn-light" type="button"><i
                                                                class="fa fa-minus"></i></button>
                                                        <input type="text" name="qty"
                                                               value="{{ $orderDetail['qty'] ?? 0 }}"
                                                               class="input-qty"/>
                                                        <button class="qty-btn-plus btn-light" type="button"><i
                                                                class="fa fa-plus"></i></button>
                                                    </div>
                                                </td>
                                                <td>
                                                    {{ format_amount_with_currency($orderDetail['price'] ?? 0, $otherData['iso_code']) }}
                                                    <img src="{{asset('assets/web/images/sar.png')}}" class="sar" alt=""/>
                                                </td>
                                                <td class="item-subtotal">
                                                    {{ format_amount_with_currency($orderDetail['subtotal'] ?? 0, $otherData['iso_code']) }}
                                                    <img src="{{asset('assets/web/images/sar.png')}}" class="sar" alt=""/>
                                                </td>
                                                <td>
                                                    <button
                                                        type="button"
                                                        data-row-id="{{ $rowId }}"
                                                        class="delete_butn butn sm_butn rounded-circle gray_butn mx-auto">
                                                        <i class="fa-light fa-trash mx-0"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class=" pay_box my-5">
                                <h5 class="fw-bold mb-4">{{ __('orders::orders.choose_payment_method') }}</h5>
                                <div class="pay_radios">
                                    <div class="row">
                                        @if(isset($paymentMethods))
                                            @foreach($paymentMethods as $paymentMethod)
                                                <div class="col-lg-4">
                                                    <div class="form-check">
                                                        <input
                                                            class="form-check-input {{ $errors->has('payment_method_id') ? 'is-invalid' : '' }}"
                                                            type="radio"
                                                            name="payment_method_id"
                                                            value="{{ $paymentMethod->id }}"
                                                            id="payRadios{{ $paymentMethod->id }}"
                                                            @checked($paymentMethod->id == old('payment_method_id'))/>
                                                        <label class="form-check-label d-block"
                                                               for="payRadios{{ $paymentMethod->id }}">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center w-100">
                                                                <h6 class="title mb-0">
                                                                    <img src="{{ getImage($paymentMethod->image) }}"
                                                                         class="img"
                                                                         alt="{{ $paymentMethod->title }}"/>
                                                                    {{ $paymentMethod->title }}
                                                                </h6>
                                                                <span class="circle"></span>
                                                            </div>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="sm_box">
                                <div class="couboun_box mb-4">
                                    <h4 class="fw-bold fs-6 mb-4">
                                        {{ __('orders::orders.coupon') }}
                                    </h4>
                                    <div class="form-group position-relative">
                                        <input type="text"
                                               name="coupon"
                                               value="{{ old('coupon') }}"
                                               autocomplete="off"
                                               class="form-control {{ $errors->has('coupon') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('orders::orders.enter_coupon') }}"/>
                                        <button type="button" id="applyCoupon"
                                                class="apply_butn butn primary_butn">
                                            {{ __('orders::orders.apply') }}
                                        </button>
                                    </div>
                                    <div id="couponResult"></div>
                                </div>
                            </div>
                            <div class="summary_checkout">
                                <h4 class="title">{{ __('carts::carts.cart_total') }}</h4>

                                <div class="">
                                    <div class="item d-flex align-items-center justify-content-between">
                                        <span>{{ __('carts::carts.item_price') }}</span>
                                        <span>
                                                <span
                                                    class="color-primary summery-subtotal">{{ $parsedPrices['subtotal']['amount'] ?? 0 }}</span>
                                                <small>{{ $parsedPrices['subtotal']['currency'] ?? '' }} 
                                                <img src="{{asset('assets/web/images/sar.png')}}" class="sar" alt=""/> </small>
                                            </span>
                                    </div>
                                    @php $couponDiscountAmount = $parsedPrices['coupon_discount']['amount'] ?? 0; @endphp
                                    <div
                                        class="item d-flex align-items-center justify-content-between summery-coupon-discount-wrapper {{ $couponDiscountAmount == 0 ? 'd-none' : '' }}"
                                        style="">
                                        <span>{{ __('carts::carts.discount') }}</span>
                                        <span>
                                            <span
                                                class="color-primary summery-coupon-discount">{{ $couponDiscountAmount }}</span>
                                            <small>{{ $parsedPrices['coupon_discount']['currency'] ?? '' }}
                                            <img src="{{asset('assets/web/images/sar.png')}}" class="sar" alt=""/></small>
                                        </span>
                                    </div>
                                    <div class="item d-flex align-items-center justify-content-between">
                                        <span>{{ __('carts::carts.vat') }}</span>
                                        <span>
                                            <span
                                                class="color-primary summery-tax-amount">{{ $parsedPrices['tax_amount']['amount'] ?? 0 }}</span>
                                            <small>{{ $parsedPrices['tax_amount']['currency'] ?? '' }}
                                            <img src="{{asset('assets/web/images/sar.png')}}" class="sar" alt=""/></small>
                                        </span>
                                    </div>
                                    <div class="item d-flex align-items-center justify-content-between">
                                        <span>{{ __('carts::carts.total') }}</span>
                                        <span>
                                            <span
                                                class="color-primary summery-total">{{ $parsedPrices['total']['amount'] ?? 0 }}</span>
                                            <small>{{ $parsedPrices['total']['currency'] ?? '' }}
                                            <img src="{{asset('assets/web/images/sar.png')}}" class="sar filterPrimary " alt=""/></small>
                                        </span>
                                    </div>
                                </div>
                                <div class="butns mt-5">
                                    <button type="submit" class="butn primary_butn rounded w-100">
                                        <span> {{ __('orders::orders.complete_payment') }} </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>

    <!-- Modal -->
    <div class="modal  delModal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel"
         role="dialog"
         aria-modal="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="content text-center mt-4">
                        <h4 class="title fs-2 text-dark mb-4"><b> {{ __('carts::carts.delete_item') }} </b></h4>
                        <h5 class="mb-4"> {{ __('carts::carts.sure_delete') }} </h5>
                        <div class="d-flex justify-content-center align-items-center justify-content-center mt-5">
                            <button type="button" class="butn btn-secondary  mx-1" data-bs-dismiss="modal">
                                {{ __('general.no') }}
                            </button>
                            <button type="button"
                                    data-row-id=""
                                    data-modal-id="delModal"
                                    class="butn primary_butn mx-1 remove_from_cart">
                                {{ __('general.yes') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

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

            function applyCoupon() {
                let coupon = couponInput.val().trim();
                let applyCouponBtn = $('#applyCoupon');
                if (coupon) {
                    $.ajax({
                        url: '{{ route('web.coupons.check') }}',
                        type: 'POST',
                        data: {
                            coupon: coupon,
                        },
                        beforeSend: function () {
                            const originalContent = applyCouponBtn.html();
                            applyCouponBtn.data('original-content', originalContent);

                            // Disable the submit button and show a loading spinner
                            applyCouponBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> {{-- __("general.loading") --}}');
                        },
                        success: function (response) {
                            updateHtmlCalculations(response.data?.calculations, response.cart_total_items);
                        },
                        error: function (xhr, status, error) {
                            displayAjaxError(xhr);
                        },
                        complete: function (xhr, status) {
                            const originalContent = applyCouponBtn.data('original-content');
                            applyCouponBtn.prop('disabled', false).html(originalContent);
                        }
                    });
                } else {
                    $('#couponResult').html('');
                }
            }

            // 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