@extends(getTemplate().'.layouts.app')


@section('content')
    <section class="cart-banner position-relative text-center">
        <h1 class="font-30 text-white font-weight-bold">{{ trans('cart.shopping_cart') }}</h1>
        <span class="payment-hint font-20 text-white d-block">{{ ($cartTotalFormatted ?? formatPaymentPrice($total, $cartOrderCurrency ?? 'EGP')) . ' ' . trans('cart.for_items',['count' => $carts->count()]) }}</span>
    </section>

    <div class="container">
        @include('web.default.includes.payment_failure_alert')

        @if($errors->any())
            <div class="alert alert-danger mt-20">
                @foreach($errors->all() as $error)
                    <div>{{ $error }}</div>
                @endforeach
            </div>
        @endif

        <section class="mt-45">
            <h2 class="section-title">{{ trans('cart.cart_items') }}</h2>

            <div class="rounded-sm shadow mt-20 py-25 px-10 px-md-30">
                @if($carts->count() > 0)
                    <div class="row d-none d-md-flex">
                        <div class="col-12 col-lg-8"><span class="text-gray font-weight-500">{{ trans('cart.item') }}</span></div>
                        <div class="col-6 col-lg-2 text-center"><span class="text-gray font-weight-500">{{ trans('public.price') }}</span></div>
                        <div class="col-6 col-lg-2 text-center"><span class="text-gray font-weight-500">{{ trans('public.remove') }}</span></div>
                    </div>
                @endif

                @foreach($carts as $cart)
                    @php
                        $cartItemInfo = $cart->getItemInfo();
                    @endphp
                    @if(empty($cartItemInfo) || empty($cartItemInfo['title']))
                        @continue
                    @endif
                    <div class="row mt-5 cart-row">
                        <div class="col-12 col-lg-8 mb-15 mb-md-0">
                            <div class="webinar-card webinar-list-cart row">
                                <div class="col-4">
                                    <div class="image-box">
                                        <img src="{{ $cartItemInfo['imgPath'] ?? '' }}" class="img-cover" alt="">
                                    </div>
                                </div>

                                <div class="col-8">
                                    <div class="webinar-card-body p-0 w-100 h-100 d-flex flex-column">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <a href="{{ $cartItemInfo['itemUrl'] ?? '#!' }}" target="_blank">
                                                <h3 class="font-16 font-weight-bold text-dark-blue">{{ $cartItemInfo['title'] }}</h3>
                                            </a>
                                        </div>

                                        @if(!empty($cart->reserve_meeting_id))
                                            <div class="mt-10">
                                                <span class="text-gray font-12 border rounded-pill py-5 px-10">{{ $cart->reserveMeeting->day .' '. $cart->reserveMeeting->meetingTime->time }} ({{ $cart->reserveMeeting->meeting->getTimezone() }})</span>
                                            </div>

                                            @if($cart->reserveMeeting->meeting->getTimezone() != getTimezone())
                                                <div class="mt-10">
                                                    <span class="text-danger font-12 border border-danger rounded-pill py-5 px-10">{{ $cart->reserveMeeting->day .' '. dateTimeFormat($cart->reserveMeeting->start_at,'h:iA',false).'-'.dateTimeFormat($cart->reserveMeeting->end_at,'h:iA',false) }} ({{ getTimezone() }})</span>
                                                </div>
                                            @endif
                                        @endif

                                        <span class="text-gray font-14 mt-auto">
                                            {{ trans('public.by') }}
                                            <a href="{{ $cartItemInfo['profileUrl'] }}" target="_blank" class="text-gray text-decoration-underline">{{ $cartItemInfo['teacherName'] }}</a>
                                        </span>

                                        @include('web.default.includes.webinar.rate',['rate' => $cartItemInfo['rate']])
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-6 col-lg-2 d-flex flex-md-column align-items-center justify-content-center">
                            <span class="text-gray d-inline-block d-md-none">{{ trans('public.price') }} :</span>

                            @if(!empty($cartItemInfo['discountPrice']))
                                <span class="text-gray text-decoration-line-through mx-10 mx-md-0">{{ formatPaymentPrice($cartItemInfo['price'], $cartItemInfo['currency'] ?? ($cartOrderCurrency ?? 'EGP')) }}</span>
                                <span class="font-20 text-primary mt-0 mt-md-5 font-weight-bold">{{ formatPaymentPrice($cartItemInfo['discountPrice'], $cartItemInfo['currency'] ?? ($cartOrderCurrency ?? 'EGP')) }}</span>
                            @else
                                <span class="font-20 text-primary mt-0 mt-md-5 font-weight-bold">{{ formatPaymentPrice($cartItemInfo['price'], $cartItemInfo['currency'] ?? ($cartOrderCurrency ?? 'EGP')) }}</span>
                            @endif

                            @if(!empty($cartItemInfo['quantity']))
                                <span class="font-12 text-warning font-weight-500 mt-0 mt-md-5">({{ $cartItemInfo['quantity'] }} {{ trans('update.product') }})</span>
                            @endif
                        </div>

                        <div class="col-6 col-lg-2 d-flex flex-md-column align-items-center justify-content-center">
                            <span class="text-gray d-inline-block d-md-none mr-10 mr-md-0">{{ trans('public.remove') }} :</span>

                            <a href="/cart/{{ $cart->id }}/delete" class="delete-action btn-cart-list-delete d-flex align-items-center justify-content-center">
                                <i data-feather="x" width="20" height="20"></i>
                            </a>
                        </div>
                    </div>
                @endforeach

                <button type="button" onclick="window.history.back()" class="btn btn-sm btn-outline-primary mt-25">{{ trans('cart.continue_shopping') }}</button>
            </div>
        </section>

        <form action="/cart/checkout" method="post" id="cartForm">
            {{ csrf_field() }}
            <input type="hidden" name="discount_id" id="cart_discount_id" value="">

            @if(!empty($hasPhysicalProduct) && $hasPhysicalProduct)
                @include('web.default.cart.includes.shipping_and_delivery')
            @endif

            <div class="row mt-30">
                <div class="col-12 col-lg-6">
                    <section class="mt-45">
                        <h3 class="section-title">{{ trans('cart.coupon_code') }}</h3>
                        <div class="rounded-sm shadow mt-20 py-25 px-20">
                            <p class="text-gray font-14">{{ trans('cart.coupon_code_hint') }}</p>

                            @if(!empty($userGroup) and !empty($userGroup->discount))
                                <p class="text-gray mt-25">{{ trans('cart.in_user_group',['group_name' => $userGroup->name , 'percent' => $userGroup->discount]) }}</p>
                            @endif

                            <div class="form-group">
                                <input type="text" name="coupon" id="coupon_input" class="form-control mt-25"
                                       placeholder="{{ trans('cart.enter_your_code_here') }}">
                                <span class="invalid-feedback">{{ trans('cart.coupon_invalid') }}</span>
                                <span class="valid-feedback">{{ trans('cart.coupon_valid') }}</span>
                            </div>

                            <button type="button" id="checkCoupon" class="btn btn-sm btn-outline-primary mt-20">{{ trans('cart.validate') }}</button>
                        </div>
                    </section>
                </div>

                <div class="col-12 col-lg-6">
                    <section class="mt-45">
                        <h3 class="section-title">{{ trans('cart.cart_totals') }}</h3>
                        <div class="rounded-sm shadow mt-20 pb-20 px-20">
                            <div class="cart-checkout-item">
                                <h4 class="text-secondary font-14 font-weight-500">{{ trans('cart.sub_total') }}</h4>
                                <span class="font-14 text-gray font-weight-bold">{{ formatPaymentPrice($subTotal, $cartOrderCurrency ?? 'EGP') }}</span>
                            </div>

                            <div class="cart-checkout-item">
                                <h4 class="text-secondary font-14 font-weight-500">{{ trans('public.discount') }}</h4>
                                <span class="font-14 text-gray font-weight-bold">
                                    <span id="totalDiscount">{{ formatPaymentPrice($totalDiscount, $cartOrderCurrency ?? 'EGP') }}</span>
                                </span>
                            </div>

                            <div class="cart-checkout-item">
                                <h4 class="text-secondary font-14 font-weight-500">{{ trans('cart.tax') }}
                                    @if(!$taxIsDifferent)
                                        <span class="font-14 text-gray">({{ $tax }}%)</span>
                                    @endif
                                </h4>
                                <span class="font-14 text-gray font-weight-bold"><span id="taxPrice">{{ formatPaymentPrice($taxPrice, $cartOrderCurrency ?? 'EGP') }}</span></span>
                            </div>

                            @if(!empty($productDeliveryFee))
                                <div class="cart-checkout-item">
                                    <h4 class="text-secondary font-14 font-weight-500">{{ trans('update.delivery_fee') }}</h4>
                                    <span class="font-14 text-gray font-weight-bold">{{ formatPaymentPrice($productDeliveryFee, $cartOrderCurrency ?? 'EGP') }}</span>
                                </div>
                            @endif

                            <div class="cart-checkout-item border-0">
                                <h4 class="text-secondary font-14 font-weight-500">{{ trans('cart.total') }}</h4>
                                <span class="font-20 text-primary font-weight-bold"><span id="totalAmount">{{ formatPaymentPrice($total, $cartOrderCurrency ?? 'EGP') }}</span></span>
                            </div>

                            @if(($cartOrderCurrency ?? '') === 'USD' || !empty($paymentCharge['original_currency']))
                                <p class="font-12 text-gray mt-10 mb-0">
                                    السعر بالدولار — مبلغ الدفع عبر EasyKash:
                                    <strong>{{ formatPaymentPrice($paymentCharge['amount'] ?? 0, 'EGP') }}</strong>
                                    @if(!empty($paymentCharge['usd_to_egp_rate']))
                                        ({{ $paymentCharge['original_amount'] ?? $total }} USD × {{ $paymentCharge['usd_to_egp_rate'] }})
                                    @endif
                                </p>
                            @endif

                            <p class="font-12 text-gray mt-15 mb-0">{{ trans('update.easykash_checkout_hint') }}</p>

                            <button type="submit" class="btn btn-primary btn-lg btn-block mt-20">
                                <i data-feather="credit-card" width="18" height="18" class="mr-5"></i>
                                {{ trans('update.pay_with_easykash') }}
                            </button>
                        </div>
                    </section>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts_bottom')
    <script>
        var couponInvalidLng = '{{ trans('cart.coupon_invalid') }}';
        var selectProvinceLang = '{{ trans('update.select_province') }}';
        var selectCityLang = '{{ trans('update.select_city') }}';
        var selectDistrictLang = '{{ trans('update.select_district') }}';
    </script>

    <script src="/assets/default/js/parts/get-regions.min.js"></script>
    <script src="/assets/default/js/parts/cart.min.js"></script>
    @if(request()->get('checkout') == '1')
        <script>
            $(function () {
                var $form = $('#cartForm');
                if ($form.length) {
                    $('html, body').animate({ scrollTop: $form.offset().top - 80 }, 400);
                    @if(empty($hasPhysicalProduct))
                    setTimeout(function () {
                        $form.trigger('submit');
                    }, 500);
                    @endif
                }
            });
        </script>
    @endif
@endpush
