<style>
    .total-summary ul{
        margin:0;
        padding:0;
        list-style:none;
        display:grid;
        grid-template-columns: 155px 1px auto;        
    }
    
    #kurang:hover, #tambah:hover {
        background-color:gray;
    }
    
</style>


<div class="shopping-cart" style="overflow:auto;padding-bottom:150px">
    <!--<div id="ref-id" style="margin-top: 1rem;text-align:center;font-size:17pt"><script>sessionStorage.ref_id</script></div>-->
    <div x-show="!$store.cart.items.length" style="margin-top: 1rem;text-align:center;font-size:17pt">Keranjang Kosong.</div>
    
    <div x-show="$store.cart.items.length">

        <template x-for="(item, index) in $store.cart.items" x-key="index">
            <div class="cart-item">
                <div style="width:4rem;height:4rem">
                    <img :src="`${item.img}`" :alt="item.Name" style="display:block;width:auto;height:auto;max-width:4rem;max-height:4rem;margin:auto"/>
                </div>
                <div class="item-detail">
                    <h3 x-text="item.name"></h3>
                    <p>Ukuran: <span x-text="item.size"></span> Berat: <span x-text="item.totalWeight"></span>&nbsp;gr.</p>
                    <div class="item-price">
                        <span x-text="rupiah(item.price)"></span> &times; <span style="border:.3px solid gray;padding:2px"><span id="kurang" @click="$store.cart.remove(item.id,item.sizeId,index)" style="cursor:pointer;padding:0 5px">&minus;</span><span x-text="item.quantity" style="padding:0 5px"></span><span id="tambah" @click="$store.cart.add(item)" style="cursor:pointer;padding:0 5px">&plus;</span></span> <span style="margin:0 5px">&equals;</span> <span x-text="rupiah(item.total)"></span>
                    </div>
                </div>
            </div>
        </template>
        
        <div class="total-summary">
            <ul>
                <li>Sub Total </li><li>:</li> <li style="text-align:right" x-text="rupiah($store.cart.total)"></li>
            </ul>
            <ul>
                <li>Berat barang (gr)<li>:</li> <li style="text-align:right" x-text="$store.cart.grandWeight"></li>
            </ul>
            <ul>
                <li>Biaya pengiriman <li>:</li> <li style="text-align:right" x-text="if($store.cart.districtId === 0) {return 'Tentukan tujuan pengiriman.';}else{return rupiah($store.cart.totalShippingCost);}"></li>
            </ul>
            <ul style="font-weight:bold">
                <li>Total </li><li>:</li> <li style="text-align:right" x-text="rupiah($store.cart.grandTotal)"></li>
            </ul>
        </div>
                
        <div class="form-container">
            <form action="" id="checkoutForm">
                @csrf
                <!--
                <input type="hidden" name="items" x-model="JSON.stringify($store.cart.items)"/>
                <input type="hidden" name="shippingCost" x-model="$store.cart.totalShippingCost"/>
                <input type="hidden" name="subTotal" x-model="$store.cart.total" />
                <input type="hidden" name="total" x-model="$store.cart.grandTotal" />
                <input type="hidden" name="district_id" x-model="$store.cart.districtId"/>
                -->
                    
                <h5>Customer Detail</h5>
                        
                <label for="name"><span>Nama</span>
                    <input type="name" name="name" id="name" placeholder="Nama Anda"/>
                </label>
    
                <label for="phone"><span>Telepon</span>
                    <input type="tel" name="phone" id="phone" placeholder="Nomor Telepon Anda"/>
                </label>
    
                <label for="address">
                    <span>Alamat</span>
                    <input type="text" name="address" id="address" placeholder="Alamat Lengkap Anda"/>
                </label>
    
                <!-- ====== -->
                <label for="input-box" style="align-items:self-start">
                    <span style="margin-top:5px">Kota/Kecamatan</span>
                    <div id="kota" x-show="$store.cart.items.length" style="width:70%;position:relative" x-data="provinsi">
                        <div id="search-open" @click.prevent="open = !open;" style="cursor:pointer;padding:5px;text-align:left">Masukan Kota/Kecamatan</div>
                        
                        <div x-show="open" style="position:absolute;width:100%">
                            <input id="input-box" type="search" x-model="search" placeholder="Cari Kota/Wilayah tujuan pengiriman..." style="width:100%;padding:5px;background-color:#f8f8f8;">
                            <div id="search-filtered" style="width:100%;max-height:130px;overflow:auto;background-color:#fff">
                                <template x-for="option in searchResults">
                                    <a @click.prevent="open = false; 
                                                    $store.cart.shippingCharge(option);
                                                    document.getElementById('search-open').innerHTML = option.name;" 
                                        x-text="option.name" style="padding:5px;display:block;font-size:10pt;text-align:left;cursor:pointer;border:thin solid lightgray">
                                    </a>
                                </template>
                            </div>
                        </div>
                        
                    </div>
                </label>
                <!-- ====== -->
                    
                <div>Pilih metode pembayaran</div>
                <button class="checkout-button disabled" type="submit" id="cod-button" value="cod">COD</button>
                <button class="checkout-button disabled" type="submit" id="checkout-button" value="checkout">Non Tunai</button>
                <button class="checkout-button" id="clear-button" value="clear">Clear</button>
            </form>
        </div>
    </div>
            
</div>