@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@push('head-other-scripts')
    {!! showSettingBodyByAlias('iute-credit-header-script') !!}
@endpush

@section('container')

    <div class="page-content">

        @if(!empty($basket) && count($basket))
            <div class="breadcrumbs">
                <div class="container d-flex">
                    {{ Breadcrumbs::render('cart-page') }}
                </div>
            </div>

            <section>
                <div class="container">
                    <div>
                        <div class="cart" id="cart-page">

                            <form method="POST" action="{{ route('ajax-new-order') }}" id="new-order"
                                  enctype="multipart/form-data">

                                @csrf

                                <div class="cart-step1">
                                    <h1 class="cart-title">{{ ShowLabelById(27) }}</h1>
                                    <div>
                                        <div>
                                            @foreach($basket as $one_basket_item)
                                                <div class="cart-product-block discount-product">
                                                    <div class="img"
                                                         style="background-image:url({{ $one_basket_item->goodsItemId->img_s }})">
                                                        <a href="{{ route('product', [$one_basket_item->goodsItemId->alias]) }}"></a>
                                                    </div>
                                                    <div class="links"><a
                                                            href="{{ route('product', [$one_basket_item->goodsItemId->alias]) }}"
                                                            class="link"><span>{{ $one_basket_item->goodsItemId->name }}</span></a>
                                                    </div>
                                                    <div class="cart-product-right">
                                                        <div class="price-one-item">
                                                            <p style="margin-top: 1rem">
                                                                <b>{{ getDefaultPriceFormat($one_basket_item->goodsItemId->price, 1) }}
                                                                    {{ ShowLabelById(10) }}</b></p>
                                                        </div>
                                                        <div class="inputs">
                                                            <div class="minus count-minus-change">
                                                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                                                                     y="0px" viewBox="0 0 455 455"
                                                                     style="enable-background:new 0 0 455 455;"
                                                                     xml:space="preserve" width="13" height="13">
                                <rect y="212.5" width="455" height="30"/>
                              </svg>
                                                            </div>
                                                            <input type="text" name="quantity"
                                                                   class="basket-quantity-change" min="1"
                                                                   value="{{ $one_basket_item->items_count ?? 1 }}"
                                                                   data-goods-item-id="{{ $one_basket_item->goods_item_id ?? '' }}"
                                                                   data-page="cart">
                                                            <div class="plus count-plus-change">
                                                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                                                                     y="0px" viewBox="0 0 42 42"
                                                                     style="enable-background:new 0 0 42 42;"
                                                                     xml:space="preserve" width="13" height="13">
                                <polygon points="42,19 23,19 23,0 19,0 19,19 0,19 0,23 19,23 19,42 23,42 23,23 42,23 "/>
                              </svg>
                                                            </div>
                                                        </div>
                                                        <div class="quantity">
                                                            <p>
                                                                <b><span
                                                                        class="one-item-total-price">{{ getDefaultPriceFormat($one_basket_item->goodsItemId->price * $one_basket_item->items_count, 1) }}</span></b> {{ ShowLabelById(10) }}
                                                            </p>
                                                            <a href="javascript:;" class="delete remove-basket-item"
                                                               data-goods-item-id="{{ $one_basket_item->goods_item_id ?? '' }}">
                                                                <svg width="22" height="22" viewBox="0 0 22 22"
                                                                     fill="none"
                                                                     xmlns="http://www.w3.org/2000/svg">
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                          d="M3.28009 2.74435C2.98733 2.74435 2.75 2.98168 2.75 3.27444V4.57745C2.75 4.87021 2.98733 5.10754 3.28009 5.10754H18.7199C19.0127 5.10754 19.25 4.87021 19.25 4.57745V3.27444C19.25 2.98168 19.0127 2.74435 18.7199 2.74435H14.472C14.3347 2.74435 14.2099 2.66483 14.1518 2.54041L13.9438 2.09468C13.7986 1.78364 13.4864 1.58484 13.1432 1.58484H8.88512C8.54436 1.58484 8.23398 1.7808 8.08747 2.08845L7.87104 2.5429C7.81243 2.66596 7.68828 2.74435 7.55198 2.74435H3.28009ZM18.0837 6.28034H3.90299L4.69333 18.9243C4.74572 19.7624 5.44074 20.4153 6.2805 20.4153H15.7062C16.546 20.4153 17.241 19.7624 17.2934 18.9243L18.0837 6.28034Z"
                                                                          fill="#E0E3F4"/>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="basket-delivery-mobile"><span
                                            class="current-delivery-city">{{ str_replace('{city}', $default_city ? $default_city->name : '', ShowLabelById(30)) }}</span>:
                                        <span
                                            class="basket-delivery-price">{{ getDefaultPriceFormat($delivery_price, 1) }}</span> {{ ShowLabelById(10) }}
                                    </div>
                                    <div class="basket-total-mobile">
                                        <div class="total-price"><span>{{ ShowLabelById(29) }}:</span> <span
                                                id="total_cost2"
                                                class="basket-total-price">{{ getDefaultPriceFormat($total_price, 1) }}</span>{{ ShowLabelById(10) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="cart-step2">
                                    <div class="cart-wrapper">
                                        <div class="cart-left" id="cart_go_cont">
                                            <div class="cart-delivery">
                                                <div class="change">
                                                    <div class="change-block">
                                                        <h2 class="cart-pay-title">{{ ShowLabelById(37) }}</h2>
                                                        <div class="change-inputs change-inputs-sam">
                                                            <div class="change-inputs-item">
                                                                <label for="name">{{ ShowLabelById(38) }}</label>
                                                                <input type="text" id="name" class="round-inputs"
                                                                       name="name" value="{{$frontUserName ?? ''}}">
                                                            </div>
                                                            <div class="change-inputs-item">
                                                                <label for="email">{{ ShowLabelById(39) }}</label>
                                                                <input type="email" id="email" class="round-inputs"
                                                                       name="email" value="{{$frontUserEmail ?? ''}}">
                                                            </div>
                                                            <div class="change-inputs-phone change-inputs-item">
                                                                <label for="phone">{{ ShowLabelById(40) }} *</label>
                                                                <input type="text" id="phone" class="round-inputs"
                                                                       name="phone" value="{{$frontUserPhone ?? ''}}">
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <label for="comment">{{ ShowLabelById(41) }} </label>
                                                            <textarea name="comment" id="comment"
                                                                      class="round-inputs w-100"
                                                                      style="height:150px"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cart-delivery">
                                                <h2 class="cart-pay-title">{{ ShowLabelById(42) }}</h2>
                                                <div class="cart-delivery-head">
                                                    <ul>
                                                        <li>
                                                            <input type="radio" name="delivery_method"
                                                                   class="delivery-type" id="delivery"
                                                                   value="delivery" checked>
                                                            <label for="delivery">{{ ShowLabelById(31) }}</label>
                                                        </li>
                                                        <li>
                                                            <input type="radio" name="delivery_method"
                                                                   class="delivery-type" value="pickup"
                                                                   id="pickup">
                                                            <label for="pickup">{{ ShowLabelById(32) }}</label>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="cart-delivery-content-wrapper">
                                                    <div class="cart-delivery-content active type-delivery">
                                                        <div class="form-row">
                                                            @if(!empty($cities) && count($cities))
                                                                <div class="form-item">
                                                                    <label for="district_id">{{ ShowLabelById(43) }}
                                                                        *</label>
                                                                    <select name="district_id" id="district_id"
                                                                            class="select-district">
                                                                        @foreach($cities as $one_city)
                                                                            <option
                                                                                value="{{ $one_city->id }}">{{ $one_city->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            @endif
                                                            <div class="form-item">
                                                                <label for="city">{{ ShowLabelById(44) }} *</label>
                                                                <input type="text" id="city" name="city"
                                                                       class="default-city"
                                                                       @if($default_city) value="{{ $default_city->name }}" @endif>
                                                            </div>
                                                        </div>
                                                        <div class="form-item">
                                                            <label for="address">{{ ShowLabelById(45) }} *</label>
                                                            <input type="text" id="address" name="address">
                                                        </div>
                                                    </div>

                                                    @if(!empty($shops) && count($shops))
                                                        <div class="cart-delivery-content type-pickup">
                                                            <div class="form-item">
                                                                <label for="shops_id">{{ ShowLabelById(46) }}</label>
                                                                <select name="shops_id" id="shops_id">
                                                                    @foreach($shops as $one_shop)
                                                                        <option
                                                                            value="{{ $one_shop->id }}">{{ $one_shop->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="cart-payment">
                                                <h2 class="cart-pay-title">{{ ShowLabelById(47) }}</h2>
                                                <div class="cart-payment-head">
                                                    <ul>
                                                        <li>
                                                            <input type="radio" class="select-pay-method"
                                                                   name="pay_method" id="cash" value="cash"
                                                                   data-info-pay="{{ ShowLabelById(34) }}" checked>
                                                            <label for="cash"><img
                                                                    src="{{ asset('front-assets/img/icons/pay-cash.svg') }}"
                                                                    alt="Pay cash">{{ ShowLabelById(34) }}</label>
                                                        </li>
                                                        <li>
                                                            <input type="radio" class="select-pay-method"
                                                                   name="pay_method" id="card_online" value="card_online"
                                                                   data-info-pay="Card bancar (online)">
                                                            <label for="card_online"><img
                                                                    src="{{ asset('front-assets/img/icons/pay-card-online.svg') }}"
                                                                    alt="Pay card online">{{ ShowLabelById(142) }}</label>
                                                        </li>
                                                        <li>
                                                            <input type="radio" class="select-pay-method"
                                                                   name="pay_method" id="card" value="card"
                                                                   data-info-pay="{{ ShowLabelById(35) }}">
                                                            <label for="card"><img
                                                                    src="{{ asset('front-assets/img/icons/pay-card.svg') }}"
                                                                    alt="Pay card">{{ ShowLabelById(35) }}</label>
                                                        </li>
                                                        @if($show_credit)
                                                            <li>
                                                                <input type="radio" class="select-pay-method credit-input"
                                                                       name="pay_method" id="credit" value="iute_credit"
                                                                       data-info-pay="{{ ShowLabelById(36) }}">
                                                                <label for="credit"><img
                                                                        src="{{ asset('front-assets/img/icons/bank.svg') }}"
                                                                        alt="Pay card">{{ ShowLabelById(36) }}</label>
                                                            </li>
                                                        @endif
                                                       {{--<li style="margin-top: 0;">
                                                            <input type="radio" class="select-pay-method"
                                                                   name="pay_method" id="iute_credit"
                                                                   data-info-pay="{{ ShowLabelById(36) }}"
                                                                   value="iute_credit"
                                                                   data-gtm-form-interact-field-id="5">
                                                            <label for="iute_credit" class="iute-credit"><img
                                                                    src="{{ asset('front-assets/img/icons/logo-iute.svg') }}"
                                                                    alt="Iute credit"
                                                                    style="height: 20px;margin-right: 5px;"> </label>
                                                        </li>--}}
                                                    </ul>
                                                </div>

                                                @if($show_credit)
                                                    <div class="cart-credit">
                                                        <div class="credit-modal-list">
                                                            <div class="credit-modal-list-info">{{ ShowLabelById(165) }}</div>
                                                            <ul class="render-credit-months">
                                                                @include('front.pages.ajax.credit-months', ['total_price' => $total_price, 'item_count' => 1, 'page' => 'cart'])
                                                            </ul>
                                                        </div>
                                                        <div class="credit-modal-info">
                                                            <p>{{ ShowLabelById(166) }}</p>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="cart-right">
                                            <div class="cart-blank2" id="cart_go">
                                                <div class="cart-blank2-top">
                                                    <h4 class="cart-pay-title mt-0">{{ ShowLabelById(48) }}</h4>
                                                    <div class="cart-right-products-wrapper">
                                                        <div class="render-basket-items">
                                                            @include('front.pages.ajax.basket-items-mini', ['basket_items' => $basket])
                                                        </div>
                                                        <div class="delivery-price-wrapper mt-4">
                                                            <h4 class="cart-blank2-title delivery-price mb-0 justify-content-between">
                                                                {{ ShowLabelById(124) }}:
                                                                <div>
                                                                    <p class="d-inline-block m-0 basket-delivery-price">{{ getDefaultPriceFormat($delivery_price, 1) }}</p> {{ ShowLabelById(10) }}
                                                                </div>
                                                            </h4>
                                                        </div>
                                                        <div class="total-price-wrapper mb-4">
                                                            <div class="total-price"><span>{{ ShowLabelById(29) }}:</span> <span id="total_cost2" class="basket-total-price">{{ getDefaultPriceFormat($total_price, 1) }}</span> {{ ShowLabelById(10) }}</div>

                                                            @if($show_credit)
                                                                <div class="credit-info" style="display: none">
                                                                    <div class="credit-info-inner">
                                                                        <div class="credit-info-title">{{ ShowLabelById(36) }}:</div>
                                                                        <div class="credit-info-content">
                                                                            <div class="total-price-credit">{{--<span>{{ ShowLabelById(36) }}:</span>--}} <span><span class="total-credit-price">{{ $default_credit_price }}</span> {{ ShowLabelById(161) }}</span></div>
                                                                            <div class="total-price-desc"><span style="color: #FF6E7B;">*</span> <span class="credit-count-monts-text">{{ ShowLabelById(159) .' ' .$default_month_count .' '. Str::lower(trans_choice('variables.months_plural', $default_month_count)) }}</span></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <h4 class="cart-blank2-title">{{ ShowLabelById(49) }}</h4>
                                                    <p class="grt">
                                                        <strong>{{ ShowLabelById(42) }}</strong>
                                                        <span>
                                                            <span class="info-delivery active"> — <span
                                                                    class="delivery-method-text">{{ ShowLabelById(31) }}</span></span>
                                                        </span>
                                                    </p>
                                                    <p class="grt"><strong>{{ ShowLabelById(47) }}</strong> —
                                                        <span>
                                                            <span
                                                                class="info-payment active">{{ ShowLabelById(34) }}</span>
                                                        </span>
                                                    </p>
                                                </div>

                                                {{--<p class="aggreement">{!! ShowLabelById(51) !!}</p>--}}

                                                <p class="aggreement">
                                                    <label>
                                                        <input id="agree" name="agree" type="checkbox" checked>
                                                        <span class="aggreement-checkbox"></span>
                                                        {!! ShowLabelById(50) !!}
                                                    </label>
                                                </p>

                                                <p class="aggreement">
                                                    <label>
                                                        <input id="agree_politica" name="agree_politica" type="checkbox" checked>
                                                        <span class="aggreement-checkbox"></span>
                                                        {!! ShowLabelById(170) !!}
                                                    </label>
                                                </p>

                                                <div class="captcha">
                                                    <input type="hidden" name="g-recaptcha-response"
                                                           id="recaptcha-order">
                                                </div>

                                                <div class="cart-blank2-bottom">
                                                    <div class="cb">
                                                        <div class="button">
                                                            <button type="submit" onclick="newOrder(this)"
                                                                    data-form-id="new-order">{{ ShowLabelById(52) }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        @else
            <div class="basket-end basket-end--error">
                <div class="container">
                    <div class="basket-end-inner">
                        <div class="basket-end-img">
                            <img src="{{ asset('front-assets/img/icons/basket-end-3.svg') }}" alt="Empty cart">
                        </div>
                        <div class="basket-end-title">{{ ShowLabelById(24) }}</div>
                        <div class="basket-end-text">
                            <p>{{ ShowLabelById(25) }}</p>
                        </div>
                        <div class="basket-end-link">
                            <a href="{{ route('/') }}">{{ ShowLabelById(26) }}</a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>

    @push('other-scripts')
        <link rel="preload" href="{{ asset('front-assets/js/iute-credit.js?v=').config('custom.front.js_version') }}"
              as="script"/>
        <script type="text/javascript"
                src="{{ asset('front-assets/js/iute-credit.js?v=').config('custom.front.js_version') }}"></script>
    @endpush

@stop