@extends('pwa.template.app.main')

@push('scripts')

<script>
    async function deleteFromCart(index, actionURL) {

        // remove row data item terpilih

        $('#produk-item-' + index).remove();

        const response = await fetch(actionURL, {

            method: 'DELETE',

            headers: {

                'Content-Type': 'application/json',

                'X-CSRF-Token': '{{ csrf_token() }}'

            },

        })

        const data = await response.json();



        // set ulang total harga keranjang

        const rupiah = new Intl.NumberFormat("id").format(data.current_cart_price)

        $('#harga').text(rupiah);


        console.log("DATA CART KUANTITAS : ", data.cart_kuantitas)
        if (data.cart_kuantitas < 1) {

            $('#cart-wrapper').html(`<div class="alert alert-primary" role="alert">

          <h5 class="alert-heading">Yahh...Keranjang Anda Kosong 🥺</h5>

          <p>Silahkan Menambah Produk Ke keranjang Anda ...</p>

          <hr>

          <a href="{{ route('shop') }}" class="btn btn-primary w-100">Yuk Cari Produk</a>

        </div>`)

            $('#card-checkout').remove();

        }



        // set ulang kuantitas di navbar

        $('#cart-items-amount').text(data.cart_kuantitas);

    }


    async function handleKuantitas(index, actionURL, action) {
        let value = parseFloat($(`.product-qty-${index}`).val());


        value = action == 'plus' ? value + 1 : value - 1;

        if (value > 0){
          const response = await fetch(actionURL, {

method: 'PATCH',

headers: {

    'Content-Type': 'application/json',

    'X-CSRF-Token': '{{ csrf_token() }}'

},

body: JSON.stringify({

    kuantitas: value

})

})

const data = await response.json();




// set ulang total harga keranjang

const rupiah = new Intl.NumberFormat("id").format(data.current_cart_price)

$('#harga').text(rupiah);

// set ulang kuantitas produk

$('#kuantitas-' + index).text(data.current_kuantitas);

// set ulang kuantitas di navbar

$('#cart-items-amount').text(data.cart_kuantitas);
        }

       

    }

</script>

@endpush

@section('head')

<style>
    td {

        padding: 0 !important;

        height: 20px;

    }

</style>

@endsection

@section('app-content')

<div class="container pt-3 pb-5">

    <div class="mb-3">

        <a class="text-black" href="{{ route('shop') }}">

            <i class="fa-solid fa-arrow-left me-1"></i> <span>Kembali Belanja</span>

        </a>

    </div>

    <div class="cart-wrapper-area" id="cart-wrapper">

        @if ($cart->produks->count() > 0)

        <div class="cart-table card mb-3">

            <div class="table-responsive card-body">

                <table class="table mb-0">

                    <tbody id="tbody">

                        @foreach ($cart->produks as $i => $produk)

                        <tr id="produk-item-{{ $i }}" style="height: 90px; position: relative;">

                            <td>

                                <div class="py-2 d-flex align-items-center m-0 text-primary" role="alert"
                                    style="width: fit-content; gap: 5px; position: absolute; top: 0">

                                    <i class="fa-solid fa-store"></i> {{ $produk->merchant->nama }}

                                </div>

                                <img class="rounded" src="{{ asset('storage/' . $produk->foto) }}" alt="">

                            </td>

                            <td>

                                <a href="{{route('produk-detail', $produk->id)}}">{{ $produk->nama }}

                                    <span>Rp. {{ number_format($produk->harga) }} ×

                                        <span style="display: inline" id="kuantitas-{{ $i }}">

                                            {{ $produk->pivot->kuantitas }}

                                        </span>

                                    </span>

                                </a>

                            </td>

                            <td>
                                <div class="cart-form">

                                    <div class="order-plus-minus d-flex align-items-center">

                                        <div onclick="handleKuantitas({{ $i }}, '{{ route('cart.updateKuantitas', $produk->id) }}', 'min')"
                                            class="quantity-button-handler">-</div>

                                        <input id="kuantitas"
                                            class="form-control cart-quantity-input product-qty-{{$i}}" step="1"
                                            type="number" min="1" max="{{$produk->stok}}"
                                            value="{{ $produk->pivot->kuantitas }}"
                                            onchange="handleKuantitas({{ $i }}, '{{ route('cart.updateKuantitas', $produk->id) }}')">
                                        <div onclick="handleKuantitas({{ $i }}, '{{ route('cart.updateKuantitas', $produk->id) }}', 'plus')"
                                            class="quantity-button-handler">+</div>

                                    </div>
                                </div>


                            </td>

                            <th class="py-5" scope="row">

                                <a class="remove-product"
                                    onclick="deleteFromCart({{ $i }},'{{ route('cart.delete', $produk->id) }}')">

                                    <i class="fa-solid fa-xmark"></i>

                                </a>

                            </th>

                        </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

        @else

        <div class="alert alert-primary" role="alert">

            <h5 class="alert-heading">Yahh...Keranjang Anda Kosong 🥺</h5>

            <p>Silahkan Menambah Produk Ke keranjang Anda ...</p>

            <hr>

            <a href="{{ route('shop') }}" class="btn btn-primary w-100">Yuk Cari Produk</a>

        </div>

        @endif

    </div>

    @if ($cart->produks->count() > 0)

    <div class="card cart-amount-area" id="card-checkout">

        <div class="card-body d-flex align-items-center justify-content-between">

            <h5 class="total-price mb-0">Rp <span class=""
                    id="harga">{{ number_format($cart->harga, 0, 0, '.') }}</span>

            </h5>

            <a class="btn btn-warning" href="{{ route('checkout', $cart->id) }}">Lanjut ke Pembayaran</a>

        </div>

    </div>

    @endif

</div>

@endsection