@php
    use App\Models\Setting;
@endphp
@extends('layouts.app', [
    'navTitle' => 'Kosár',
    'pageTitle' => 'Kosár',
    'seoTitle' => 'Kosár',
    'seoDesc' => 'Kosár',
    'pageImageRelativeUrl' => '',
    'navBackgroundDesktop' => 'pay/nav-background-desktop.webp',
    'navBackgroundMobile' => 'pay/nav-background-mobile.webp',
    'menuIndex' => -1,
])
@section('content')
    <link rel="stylesheet" href="/css/cart.css">
    <script src="/js/cart.js"></script>
    @php
        $sum = Auth::user()->getCartSum();
        $remainingCupons = max(0, Auth::user()->getRemainingCupons());
        $shippingCost = Auth::user()->first_free_order_shipping_active ? 0 : Setting::getValue('shipping_cost');
    @endphp
    <script>
        let remainingCupons = {{ $remainingCupons }};
        let shippingCost = {{ $shippingCost }};
        let csrfToken = '{{ csrf_token() }}';
    </script>
    <div class="container big-padding">
        @if (Auth::user()->cartItems->isEmpty())
            <div class="title text-center">A kosarad üres</div>
            <div class="spacer-1"></div>
            <div class="text-center">
                <a href="/exchangeable-toys">
                    <button>
                        Termékek böngészése
                    </button>
                </a>
            </div>
        @else
            <div class="green-container">
                <div class="row header no-gutters">
                    <div>Termék</div>
                    <div class="flex-grow-1"></div>
                    <div class="table-db">db.</div>
                    <div class="table-price">Bruttó ár/db.</div>
                    <div class="table-total">Összesen</div>
                </div>
                @foreach (Auth::user()->cartItems as $item)
                    <div id="cart-container-{{ $item->id }}" class="row product no-gutters flex-nowrap">
                        <img class="cursor-pointer" onclick="removeCartItem({{ $item->id }})" src="/images/profile/minus.svg">
                        <div class="white-container d-flex flex-column flex-md-row flex-fill align-items-md-center flex-nowrap">
                            <div class="d-flex align-items-center">
                                <img class="product-image"
                                    src="/storage/product_images/{{ $item->product->id }}.{{ $item->product->image_extension }}">
                                <div class="table-title">{{ $item->product->name }}</div>
                            </div>
                            <div class="flex-grow-1"></div>
                            <div class="mobile-spacer d-block d-md-none"></div>
                            <div class="table-db d-flex d-md-block align-items-center">
                                <div class="d-block d-md-none">Darab:&nbsp;&nbsp;</div>
                                <input id="quantity-{{ $item->id }}" type="number" value="{{ $item->quantity }}"
                                    onchange="updateCartItemQuantity({{ $item->id }}, this.value, {{ $item->product->price }})">
                            </div>
                            <div class="mobile-spacer d-block d-md-none"></div>
                            <div class="table-price d-flex d-md-block align-items-center">
                                <div class="d-block d-md-none">Bruttó ár/db:&nbsp;&nbsp;</div>
                                {{ number_format($item->product->price, 0, ',', ' ') }} Ft
                            </div>
                            <div class="mobile-spacer d-block d-md-none"></div>
                            <div class="table-total d-flex d-md-block align-items-center">
                                <div class="d-block d-md-none">Összesen:&nbsp;&nbsp;</div>
                                <div id="total-{{ $item->id }}">{{ number_format($item->quantity * $item->product->price, 0, ',', ' ') }} Ft</div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="spacer-0"></div>
                <div class="info-container d-flex justify-content-end">
                    <div class="info-name">Aktuális kreditek:</div>
                    <div class="info-value">{{ number_format($remainingCupons, 0, ',', ' ') }} Ft</div>
                </div>
                <div class="info-container d-flex justify-content-end">
                    <div class="info-name">Kosár érték:</div>
                    <div id="cart-sum" class="info-value">{{ number_format($sum, 0, ',', ' ') }} Ft</div>
                </div>
                <div class="info-container d-flex justify-content-end">
                    <div class="info-name">Kosár érték különbözet:</div>
                    <div id="cart-difference" class="info-value">{{ number_format(max(0, $sum - $remainingCupons), 0, ',', ' ') }} Ft</div>
                </div>
                <div class="info-container d-flex justify-content-end">
                    <div class="info-name">Szállítási költség:</div>
                    <div class="info-value">{{ number_format($shippingCost, 0, ',', ' ') }} Ft</div>
                </div>
                <div class="info-container d-flex justify-content-end">
                    <div class="info-name">Maradék kredit a vásárlás után:</div>
                    <div id="remaining-coupons" class="info-value">{{ number_format(max(0, $remainingCupons - $sum), 0, ',', ' ') }} Ft</div>
                </div>
                <div class="info-container d-flex justify-content-end">
                    <div class="info-name"><b>Fizetendő:</b></div>
                    <div id="payable-amount" class="info-value {{ max(0, $sum - $remainingCupons) > 0 ? 'red-price' : '' }}">
                        <b>{{ number_format(max(0, $sum - $remainingCupons) + $shippingCost, 0, ',', ' ') }} Ft</b>
                    </div>
                </div>
            </div>
            <div class="spacer-2"></div>
            <div class="green-container">
                <form id="checkout-form" method="POST" action="/cart/checkout">
                    @csrf
                    @method('POST')

                    <div class="title text-left">Számlázási cím megadása</div>
                    <div class="address-padding"></div>
                    <div class="form-group">
                        <label for="name">Név:</label>
                        <input type="text" class="form-control" id="name" name="name"
                            value="{{ Auth::check() ? (!empty(Auth::user()->billingAddress->name) ? Auth::user()->billingAddress->name : Auth::user()->name) : old('name') }}"
                            onkeyup="createCheckoutFormValidation('name');">
                        <div class="input-error" name="name_error"></div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <div class="form-group">
                                <label for="postal_code">Irányítószám:</label>
                                <input type="text" class="form-control" id="postal_code" name="postal_code"
                                    value="{{ Auth::check() ? Auth::user()->billingAddress->postal_code ?? '' : old('postal_code') }}"
                                    onkeyup="createCheckoutFormValidation('postal_code');">
                                <div class="input-error" name="postal_code_error"></div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6">
                            <div class="form-group">
                                <label for="city">Település:</label>
                                <input type="text" class="form-control" id="city" name="city"
                                    value="{{ Auth::check() ? Auth::user()->billingAddress->city ?? '' : old('city') }}"
                                    onkeyup="createCheckoutFormValidation('city');">
                                <div class="input-error" name="city_error"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <div class="form-group">
                                <label for="street">Utca, házszám:</label>
                                <input type="text" class="form-control" id="street" name="street"
                                    value="{{ Auth::check() ? Auth::user()->billingAddress->street ?? '' : old('street') }}"
                                    onkeyup="createCheckoutFormValidation('street');">
                                <div class="input-error" name="street_error"></div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6">
                            <div class="form-group">
                                <label for="phone">Telefonszám:</label>
                                <input type="text" class="form-control" id="phone" name="phone"
                                    value="{{ Auth::check() ? Auth::user()->billingAddress->phone ?? '' : old('phone') }}"
                                    onkeyup="createCheckoutFormValidation('phone');">
                                <div class="input-error" name="phone_error"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="1" id="billingEqualsShipping"
                            name="billing_equals_shipping" {{ old('billing_equals_shipping') ? 'checked' : '' }}
                            onclick="billingEqualsShippingClicked();">
                        <label class="ml-3" for="billingEqualsShipping">
                            Szállítási cím megegyezik a számlázási címmel
                        </label>
                    </div>
                    <div class="spacer-1 w-100"></div>
                    <div class="title text-left">Szállítási cím megadása</div>
                    <div class="address-padding"></div>
                    <div class="form-group">
                        <label for="shipping_name">Név:</label>
                        <input type="text" class="form-control" id="shipping_name" name="shipping_name"
                            value="{{ Auth::check() ? (!empty(Auth::user()->billingAddress->shipping_name) ? Auth::user()->billingAddress->shipping_name : Auth::user()->name) : old('shipping_name') }}"
                            onkeyup="createCheckoutFormValidation('shipping_name');">
                        <div class="input-error" name="shipping_name_error"></div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <div class="form-group">
                                <label for="shipping_postal_code">Irányítószám:</label>
                                <input type="text" class="form-control" id="shipping_postal_code" name="shipping_postal_code"
                                    value="{{ Auth::check() ? Auth::user()->billingAddress->shipping_postal_code ?? '' : old('shipping_postal_code') }}"
                                    onkeyup="createCheckoutFormValidation('shipping_postal_code');">
                                <div class="input-error" name="shipping_postal_code_error"></div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6">
                            <div class="form-group">
                                <label for="shipping_city">Település:</label>
                                <input type="text" class="form-control" id="shipping_city" name="shipping_city"
                                    value="{{ Auth::check() ? Auth::user()->billingAddress->shipping_city ?? '' : old('shipping_city') }}"
                                    onkeyup="createCheckoutFormValidation('shipping_city');">
                                <div class="input-error" name="shipping_city_error"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="shipping_street">Utca, házszám:</label>
                        <input type="text" class="form-control" id="shipping_street" name="shipping_street"
                            value="{{ Auth::check() ? Auth::user()->billingAddress->shipping_street ?? '' : old('shipping_street') }}"
                            onkeyup="createCheckoutFormValidation('shipping_street');">
                        <div class="input-error" name="shipping_street_error"></div>
                    </div>
                </form>
                <div class="address-padding"></div>
                <div class="row flex-nowrap no-gutters flex-column flex-md-row">
                    <div id="danger-warning" class="danger {{ $sum > $remainingCupons ? 'd-flex' : 'd-none' }}">
                        <img src="/images/profile/danger.svg">
                        <div>Figyelem! Túllépted a jelenlegi kreditkeretedet és a továbblépéskor ki kell fizetned a hiányzó összeget.</div>
                    </div>
                    <div class="flex-grow-1"></div>
                    <div class="info-container d-flex justify-content-end bottom align-items-center">
                        <div class="info-name"><b>Fizetendő:</b></div>
                        <div id="payable-amount-final" class="info-value {{ max(0, $sum - $remainingCupons) > 0 ? 'red-price' : '' }}">
                            <b>{{ number_format(max(0, $sum - $remainingCupons) + $shippingCost, 0, ',', ' ') }} Ft</b>
                        </div>
                    </div>
                </div>
            </div>
            <div class="spacer-3"></div>
            <div class="text-center">
                <button id="button" onclick="submitPaymentForm();">
                    {{ max(0, $sum - $remainingCupons) + $shippingCost > 0 ? 'Tovább a fizetéshez' : 'Rendelés leadása' }}
                </button>
            </div>
        @endif
    </div>
@endsection