@php
    $promotionImage = !empty($promotion->image ?? '') ? ImageOS::photo($promotion->image, 0, 0) : '';
    if(Agent::isMobile() && !empty($promotion->image_xs ?? '')) {
        $promotionImage = ImageOS::photo($promotion->image_xs, 0, 0);
    }
    $locale = app()->getLocale() == 'en' ? '_en' : '';
@endphp
@extends('shared.front')
@section('content')
    <div class="container cart cart-payment">
        <h2 class="page-title">
            {{$promotion->name ?? ''}}
            @if(!empty($promotion->summary ?? ''))
                <small style="font-size:60%;display:block;width:100%;">{!!$promotion->summary!!}</small>
            @endif
        </h2>
        @if(!empty($promotionImage))
            <img src="{{$promotionImage}}" alt="{{ $promotion->name }}" class="mb-4"/>
        @endif
        <form method="POST" name="checkout"
              action="{{route('home.checkout-sday',['guid' => $promotion->guid ?? $guid])}}">
            @csrf
            <input type="hidden" name="city_name" value="{{old('city_name')}}"/>
            <input type="hidden" name="district_name" value="{{old('district_name')}}"/>
            <input type="hidden" name="ward_name" value="{{old('ward_name')}}"/>
            <div class="cart__content">
                <div class="cart__col-left">
                    <div class="payment__form">
                        @include('home.errors.alert')
                        <div class="form-group">
                            <input type="text" placeholder="{{ __('messages.checkout.fullname') }}" name="name"
                                   value="{{old('name')}}"
                                   data-fv-notempty="true"
                                   data-fv-notempty-message="{{ __('messages.checkout.fullname_empty_error') }}"
                            />
                            <label>{{ __('messages.checkout.fullname') }}</label>
                        </div>
                        <div class="form-2-col">
                            <div class="form-group form-group--left">
                                <input type="tel" placeholder="{{ __('messages.checkout.phone_number') }}" name="phone"
                                       data-fv-notempty="true"
                                       data-fv-notempty-message="{{ __('messages.checkout.phone_number_empty_error') }}"
                                       pattern="^(0|84)(((24|28)\d{8})|(2[0-9]{2}\d{7})|([35789]\d{8}))$"
                                       data-fv-regexp-message="{{ __('messages.checkout.phone_number_error') }}"
                                       value="{{old('phone')}}"/>
                                <label>{{ __('messages.checkout.phone_number') }}</label>
                            </div>
                            <div class="form-group form-group--right">
                                <input type="email" placeholder="Email" name="email"
                                       value="{{old('email')}}"
                                />
                                <label>Email</label>
                            </div>
                        </div>
                        <h3>{{ __('messages.checkout.delivery_information') }}</h3>
                        <div class="form-group">
                            <input type="text" placeholder="{{ __('messages.checkout.address') }}" required
                                   name="address" value="{{old('address')}}"
                                   data-fv-notempty="true"
                                   data-fv-notempty-message="{{ __('messages.checkout.address_empty_error') }}"
                            />
                            <label>{{ __('messages.checkout.address') }}</label>
                        </div>
                        <div class="form-3-col">
                            <div class="form-group form-group--city">
                                <select id="citySelect" name="city" class="form-select2-hide-search select-validate"
                                        min="1"
                                        data-fv-greaterthan-message="{{ __('messages.checkout.city_error') }}"
                                        data-value="{{old('city',0)}}"
                                >
                                    <option value="0" checked>{{ __('messages.checkout.city') }}</option>
                                </select>
                            </div>
                            <div class="form-group form-group--district">
                                <select id="districtSelect" name="district" class="form-select2 select-validate"
                                        min="1"
                                        data-fv-greaterthan-message="{{ __('messages.checkout.district_error') }}"
                                        data-value="{{old('district',0)}}"
                                >
                                    <option value="0" checked>{{ __('messages.checkout.district') }}</option>
                                </select>
                            </div>
                            <div class="form-group form-group--district">
                                <select id="wardSelect" name="ward" class="form-select2 select-validate"
                                        min="1"
                                        data-fv-greaterthan-message="{{ __('messages.checkout.ward_error') }}"
                                        data-value="{{old('ward',0)}}"
                                >
                                    <option value="0" checked>{{ __('messages.checkout.ward') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-radio">
                            <label style="align-items: baseline;">
                                <input class="payment-method" type="radio" name="paymentmethod" id="cod" value="cod"
                                       checked/>
                                {{ __('messages.checkout.cod') }}
                            </label>
                        <!-- <label>
                                <input class="payment-method" type="radio" name="paymentmethod" id="momo" value="momo" />
                                Thanh toán bằng MOMO
                                <img src="{{ asset('front/app/assets/img/icon-momo.svg') }}" alt="momo" />
                            </label> -->
                        </div>
                    </div>
                    @include('home.elements.payment-note')
                </div>
                <!-- cart col right -->
                <div class="cart__col-right payment__sidebar">
                    <div class="cart__total">
                        @php
                            $totalAmount = 0;
                            $totalDiscount = 0;
                            $idx = 0;
                        @endphp
                        @if(isset($promotion->rules) && is_array($promotion->rules) && count($promotion->rules) > 0)
                            <ul class="related-promotion">
                                @foreach($promotion->rules as $k=>$el)
                                    @php
                                        $amount = (int)(($el->qnty ?? 1) * ($el->gift->product->sale_price ?? 0));
                                        $totalAmount += $amount;                                        
                                        if(($el->gift->discount_amount ?? 0) > 0) {
                                            $totalDiscount += (int)($el->gift->discount_amount ?? 0);
                                        } elseif(($el->gift->discount_percent ?? 0) > 0) {
                                            $totalDiscount += round($amount*($el->gift->discount_percent/100),0);
                                        }
                                    @endphp
                                    <li data-product-id="{{$el->id}}">
                                        <img src="{{asset($el->product->thumb ?? '')}}"
                                             alt="{{$el->product->{'name'.$locale} ?? ''}}"/>
                                        <a href="#">{{$el->qnty ?? 1}} {{$el->product->{'name'.$locale} ?? ''}}</a>
                                        <span class="price">{{Common::numberFormat($amount)}} vnđ</span>
                                        <input type="hidden" name="carts[{{$idx}}][id]"
                                               value="{{$el->gift->product->id ?? 0}}">
                                        <input type="hidden" name="carts[{{$idx}}][name]"
                                               value="{{$el->gift->product->name_en ?? ''}}">
                                        <input type="hidden" name="carts[{{$idx}}][price]"
                                               value="{{$el->gift->product->sale_price ?? 0}}">
                                        <input type="hidden" name="carts[{{$idx}}][priceOrigin]"
                                               value="{{$el->gift->product->import_price ?? 0}}">
                                        <input type="hidden" name="carts[{{$idx}}][quantity]"
                                               value="{{$el->qnty ?? 0}}">
                                    </li>
                                    @php
                                        $idx++;
                                    @endphp
                                @endforeach
                                <li>
                                    <strong style="margin: 15px 0 0;">{{ __('messages.checkout.gift') }}</strong>
                                </li>
                                @foreach($promotion->rules as $k=>$el)
                                    @if(($el->gift->gift_product->id ?? 0) > 0)
                                        <li data-product-id="gift-{{$el->id}}">
                                            <img src="{{ asset($el->gift->gift_product->thumb ?? '') }}"
                                                 alt="{{$el->gift->gift_product->{'name'.$locale} ?? ''}}"/>
                                            <a href="#">{{$el->gift->gift_product->qnty ?? 1}} {{$el->gift->gift_product->{'name'.$locale} ?? ''}}</a>
                                            <span class="price">0 vnđ</span>
                                        <!--
                                            <input type="hidden" name="carts[{{$idx}}][id]" value="{{$el->gift->gift_product->id ?? 0}}"/>
                                            <input type="hidden" name="carts[{{$idx}}][name]" value="{{$el->gift->gift_product->name ?? ''}}"/>
                                            <input type="hidden" name="carts[{{$idx}}][price]" value="0"/>
                                            <input type="hidden" name="carts[{{$idx}}][priceOrigin]" value="{{$el->gift->gift_product->import_price ?? 0}}"/>
                                            <input type="hidden" name="carts[{{$idx}}][quantity]" value="{{$el->gift->gift_product->qnty ?? 0}}"/>
                                            -->
                                        </li>
                                    @endif
                                    @if(($el->gift->voucher->id ?? 0) > 0)
                                        <li data-product-id="gift-{{$el->id}}">
                                            <a href="#">{{$el->gift->voucher->qnty ?? 1}} {{$el->gift->voucher->name ?? ''}}</a>
                                            <input type="hidden" name="vouchers[{{$idx}}][id]"
                                                   value="{{$el->gift->voucher->id}}">
                                            <input type="hidden" name="vouchers[{{$idx}}][qnty]"
                                                   value="{{$el->gift->voucher->qnty ?? 0}}">
                                        </li>
                                    @endif
                                    @php
                                        $idx++;
                                    @endphp
                                @endforeach
                            </ul>
                        @endif

                        <ul>
                            <li>
                                {{ __('messages.cart.sub_total') }}
                                <b><span class="amount">{{Common::numberFormat($totalAmount)}}</span> VNĐ</b>
                            </li>
                            @if($totalDiscount > 0)
                                <li>
                                    {{ __('messages.cart.discount') }}
                                    <b><span class="amount">{{Common::numberFormat($totalDiscount)}}</span> VNĐ</b>
                                    <input type="hidden" name="discount" value="{{$totalDiscount}}">
                                </li>
                            @endif
                            <li>
                                {{ __('messages.cart.shipping_fee') }}
                                <b>--</b>
                            </li>
                        </ul>
                        <div class="total">
                            @php
                                $totalAmount = $totalAmount > $totalDiscount ? ($totalAmount-$totalDiscount) : 0;
                            @endphp
                            <input type="hidden" name="totalcart" value="{{$totalAmount}}">
                            {{ __('messages.cart.total_bill') }}
                            <b class="cart__total-final"><span
                                        class="total-amount">{{Common::numberFormat($totalAmount)}}</span> VNĐ <span
                                        class="cart__total-vat">{{ __('messages.cart.include_vat') }}</span></b>
                        </div>
                        @include('home.elements.shipment-note')
                    </div>
                    @if(($checkoutOff ?? 0) == 0)
                        <button class="btn promotion-btn" type="submit">
                            {{ __('messages.checkout.payment_confirm') }}
                        </button>
                        <div class="btn promotion-btn btn-loading" style="display:none;">
                            {{ __('messages.checkout.processing') }}
                        </div>
                    @endif
                    <div class="visible-xs text-center">
                        <a href="{{ action('HomeController@cart') }}" class="common-link back-to-cart">
                            <img src="{{ asset('front/app/assets/img/arrow-back.svg') }}"
                                 alt=""/>{{ __('messages.checkout.back_to_cart') }}
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('js')
    @parent
@endsection
@section('js-ext')
    @parent
    <script>
        (function ($) {
            jQuery.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });

            if (jQuery.isFunction(jQuery.fn.formValidation)) {
                jQuery('form').each(function () {
                    jQuery(this).formValidation({
                        framework: 'bootstrap',
                    });
                });
                jQuery('.select-validate').on('change', function (e) {
                    const field = jQuery(this).attr('name');
                    const form = jQuery(this).closest('form');
                    form.formValidation('revalidateField', field);
                });

                jQuery('form[name=checkout]').submit(function () {
                    var form = jQuery(this);
                    var valid = form.data('formValidation').isValid();

                    if (valid == null) {
                        var formValidate = form.data('formValidation').validate();
                        valid = formValidate.isValid();
                    }

                    if (valid) {
                        jQuery('button[type=submit]').remove();
                        jQuery('.btn-loading').show();
                    }
                    return false;
                });
            }
        })(jQuery);
    </script>
@endsection