@extends('layouts.app')
@section('page_logo', $data['page']['logo'])

@php
    // Localization
    if(app()->getLocale() == 'se') {
        $locale = 'se';
    } else {
        $locale = 'en';
    }

    // Localization strings
    $localization = [
        'se' => [
            'cart_title' => 'Varukorg',
            'cancelBtn' => 'Avbryt',
            'payOnSiteBtn' => 'Betala på plats',
            'payOnline' => 'Betala online',
            'quantity' => 'Antal',
            'totalSum' => 'Total summa'
        ],
        'en' => [
            'cart_title' => 'Cart',
            'cancelBtn' => 'Cancel',
            'payOnSiteBtn' => 'Pay on site',
            'payOnline' => 'Pay online',
            'quantity' => 'Quantity',
            'totalSum' => 'Total sum'
        ]
    ];

    // Assign localized strings
    $cart_title = $localization[$locale]['cart_title'];
    $cancelBtn = $localization[$locale]['cancelBtn'];
    $payOnSiteBtn = $localization[$locale]['payOnSiteBtn'];
    $payOnline = $localization[$locale]['payOnline'];
    $quantity = $localization[$locale]['quantity'];
    $totalSum = $localization[$locale]['totalSum'];
@endphp

@section('content')
<main class="container mb-5">
    <div class="card">
        <div class="card-body">
            <h2 class="card-title text-center mb-4"><b>{{ $cart_title }}</b></h2>

            @foreach($lastItem as $key => $item)
            <div class="row border-top border-bottom py-3">
                <div class="col-2">
                    @if($item['price_data']['product_data']['images'][0] != 'Null')
                    <img src="{{ $item['price_data']['product_data']['images'][0] }}" alt="Item Image" class="img-fluid rounded">
                    @endif
                </div>
                <div class="col">
                    <div class="row text-muted">{{ $item['price_data']['product_data']['name'] }}</div>
                    <div class="row">{{$quantity}}: {{ $item['quantity'] }}</div>
                    <div class="row">{{$totalSum}}: {{ $item['price_data']['unit_amount'] * $item['quantity'] / 100 }} SEK</div>
                </div>
                    <div class="col text-end">
                        @if($item['price_data']['product_data']['images'][0] == 'Null')
                            <button class="btn btn-outline-danger removeItemBtn" data-session-id="{{$session['id']}}" onclick="removeItemFromCart(this)">X</button>
                        @endif
                    </div>
            </div>
            @endforeach
            <div class="text-center mt-4">
            <button class="btn btn-outline-danger me-3 btn-responsive" id="cancelBtn" onclick="window.location.href = '{{ route('cart.cancel', ['id' => $session['id']]) }}'">{{$cancelBtn}}</button>
                @if(env('PAY_ON_SITE'))
                <button class="btn btn-outline-secondary me-3 btn-responsive" id="paymentOnSiteBtn" onclick="window.location.href = '{{ route('checkout.customer', ['id' => $session['id']]) }}'">{{$payOnSiteBtn}}</button>
                @endif
                <button class="btn btn-outline-primary btn-responsive" id="paymentOnlineBtn" onclick="window.location.href = '{{ route('checkout.create', ['id' => $session['id']]) }}'">{{$payOnline}}</button>
            </div>
        </div>
    </div>
</main>

<script>
    function removeItemFromCart(e) {
    let parent = e.parentElement.parentElement;
    let name = parent.children[1].children[0].innerText;
    let quantity = parent.children[1].children[1].innerText.split(': ')[1];
    let totalSum = parent.children[1].children[2].innerText.split(': ')[1];
    let sessionId = e.getAttribute('data-session-id');
    let url = `{{ route('cart.remove') }}`;
    let data = {
        name: name,
        quantity: quantity,
        totalSum: totalSum,
        id: sessionId,
        id2: "{{ $id }}"
    };
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    }).then(response => {
        if (response.ok) {
            parent.remove();
            
            return response.json();
        }
    })
    .then(data => {
        let newId = data.sessionId;

        let onlineNewUrl = "{{ route('checkout.create', ['id' => 'id']) }}";
        onlineNewUrl = onlineNewUrl.replace('id', newId);

        let onSitenewUrl = "{{ route('checkout.customer', ['id' => 'id']) }}";
        onSitenewUrl = onSitenewUrl.replace('id', newId);

        let cancelUrl = "{{ route('cart.cancel', ['id' => 'id']) }}";
        cancelUrl = cancelUrl.replace('id', newId);

        document.getElementById('paymentOnlineBtn').removeAttribute('onclick');
        document.getElementById('paymentOnSiteBtn').removeAttribute('onclick');
        document.getElementById('cancelBtn').removeAttribute('onclick');

        document.getElementById('paymentOnlineBtn').setAttribute('onclick', `window.location.href = '${onlineNewUrl}'`);
        document.getElementById('paymentOnSiteBtn').setAttribute('onclick', `window.location.href = '${onSitenewUrl}'`);
        document.getElementById('cancelBtn').setAttribute('onclick', `window.location.href = '${cancelUrl}'`);
        
        let removeItemBtns = document.querySelectorAll('.removeItemBtn');
        removeItemBtns.forEach(btn => {
            btn.removeAttribute('data-session-id');
            btn.setAttribute('data-session-id', newId);
        });
    });
    }

</script>
@endsection



@section('extra-script')

@endsection