<style>
    .total-summary ul {
        margin:0;
        padding:0;
        list-style:none;
        display:grid;
        grid-template-columns: 155px 1px auto;
        /*font-size:1.5rem;*/
    }
    
    .form-container input {
        height:3.2rem !important;
        font-size:1.5rem;
    }
    .shopping-cart {
        font-size:1.7rem;
    }
    .product-sizes {
        font-size:2rem !important;
    }
    .product-sizes label{
        font-size:2rem !important;
    }
    .item-price #min-plus {
        padding:10px;
    }
    .item-price {
        font-size:1.7rem !important;
    }
    
    @media (min-width:576px){
        .shopping-cart {
            font-size:1.3rem;
        }
        .total-summary ul{
            grid-template-columns: 200px 1px auto;
        }
        .form-container input {
            height:2rem !important;
            font-size:1rem;
        }
        .form-container #search-open {
            height:2rem;
            padding:4px 5px;
        }
        .product-sizes {
            font-size:1rem !important;
        }
        .product-sizes label{
            font-size:1rem !important;
        }
        .item-price #min-plus {
            padding:6px;
        }
        .item-price {
            font-size:1.5rem !important;
        }
        
    }
    
    
    #kurang:hover, #tambah:hover {
        background-color:gray;
    }
</style>

<div class="shopping-cart" style="overflow:auto;padding-bottom:150px">
    <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>
                    
                    <div style="margin-bottom:10px">
                        <a x-show="if(item.size != ''){return true;}else{return false;};">Ukuran: <span x-text="item.size"></span></a>
                        Berat: <span x-text="item.totalWeight"></span>&nbsp;gr.
                    </div>
                    
                    <div class="item-price" style="margin-bottom:10px">
                        <!--<span x-text="rupiah(item.price)"> </span> &times; -->
                        <span id="min-plus" style="border:.3px solid gray">
                            <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">
                <?php echo csrf_field(); ?>
                <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="districtId" x-model="$store.cart.districtId"/>

                <h5>Customer Detail</h5>
                        
                <label for="name">Nama
                    <input type="name" name="name" id="name" placeholder="Nama Anda"/>
                </label>
    
                <label for="phone">Telepon
                    <input type="tel" name="phone" id="phone" placeholder="Nomor Telepon Anda"/>
                </label>
    
                <label for="address">Alamat
                    <input type="text" name="address" id="address" placeholder="Alamat Lengkap Anda"/>
                </label>
    
                <!-- ====== -->
                <label for="input-box">Kota/Kec.
                    <div id="kota" x-show="$store.cart.items.length" style="width:70%;position:relative" x-data="provinsi">
                        <div id="search-open" style="cursor:pointer">
                            <span id="search-open2" @click.prevent="open = !open;" style="float:left;width:92%;text-align:left;overflow:auto;white-space:nowrap">Kota/Kecamatan</span>
                            <span x-show="!open2" @click.prevent="open = !open;" style="float:left;width:8%;text-align:left"><i class="fa fa-search"></i></span>
                            <span x-show="open2" style="float:left;width:8%;" @click.prevent="open = false;open2=false;document.getElementById('search-open2').innerHTML = 'Kota/Kecamatan';$store.cart.districtId=0"><i class="fa fa-remove"></i></span>
                        </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;" autocomplete="off">
                            <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;open2=true;
                                                    $store.cart.shippingCharge(option);
                                                    document.getElementById('search-open2').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>
                <!--label for="referral_id">
                    <span>Referral Code</span>
                    <input type="text" name="referral_id" id="referral_id" readonly="true"/>
                </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">CHECKOUT</button>
                <button class="checkout-button" id="clear-button" value="clear">Clear</button>
            </form>
        </div>
        <div class="text-center">* JIKA ADA KENDALA/KESULITAN SAAT MELAKUKAN PEMBAYARAN, SILAHKAN HUBUNGI/CHAT KAMI</div>

    </div>
            
</div><?php /**PATH /home/byas1468/public_html/fashion/resources/views/components/shopping_cart.blade.php ENDPATH**/ ?>