@extends('layouts.admin')
@section('title' ,$title)

<style>
    a
    {
        text-decoration: none;
    }
    .product-card {
        width: 150px;
        position: relative;
        box-shadow: 0 2px 7px #dfdfdf;
        margin: 50px auto;
        background: #fafafa;
    }

    .badge {
        position: absolute;
        left: 0;
        top: 20px;
        text-transform: uppercase;
        font-size: 8px;
        font-weight: 700;
        background: red;
        color: #fff;
        padding: 3px 10px;
    }

    .product-tumb {
        display: flex;
        /*align-items: center;*/
        align-items: baseline;
        justify-content: center;
        /*height: 300px;*/
        padding: 15px;
        background: #f0f0f0;
    }

    .product-tumb img {
        max-width: 100%;
        max-height: 100%;
    }

    .product-details {
        padding: 30px;
    }

    .product-catagory {
        display: block;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        color: #ccc;
        margin-bottom: 18px;
    }

    .product-details h4  {
        font-weight: 500;
        display: block;
        margin-bottom: 18px;
        text-transform: uppercase;
        color: #363636;
        text-decoration: none;
        transition: 0.3s;
    }

    .product-details h4 a:hover {
        color: #fbb72c;
    }

    .product-details p {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 18px;
        color: #999;
    }

    .product-bottom-details {
        overflow: hidden;
        border-top: 1px solid #eee;
        padding-top: 20px;
    }

    .product-bottom-details div {
        float: left;
        width: 50%;
    }

    .product-price {
        font-size: 18px;
        color: #fbb72c;
        font-weight: 600;
    }

    .product-price small {
        font-size: 80%;
        font-weight: 400;
        text-decoration: line-through;
        display: inline-block;
        margin-right: 5px;
    }

    .product-links {
        text-align: right;
    }

    .product-links a {
        display: inline-block;
        margin-left: 5px;
        color: #e1e1e1;
        transition: 0.3s;
        font-size: 17px;
    }

    .product-links a:hover {
        color: #fbb72c;
    }

    .card {
        border-radius: 7px !important;
        border-color: #e1e7ec;
    }

    .mb-30 {
        margin-bottom: 30px !important;
    }

    .card-img-tiles {
        display: block;
        border-bottom: 1px solid #e1e7ec;
    }

    a {
        color: #0da9ef;
        text-decoration: none !important;
    }

    .card-img-tiles>.inner {
        display: table;
        width: 100%;
    }

    .card-img-tiles .main-img, .card-img-tiles .thumblist {
        /*display: table-cell;*/
        display: flex;
        /*width: 65%;*/
        padding: 15px;
        vertical-align: middle;
    }

    .card-img-tiles .main-img>img:last-child, .card-img-tiles .thumblist>img:last-child {
        margin-bottom: 0;
    }

    .card-img-tiles .main-img>img, .card-img-tiles .thumblist>img {
        display: block;
        width: 100%;
        margin-bottom: 6px;
    }
    .thumblist {
        width: 35%;
        border-left: 1px solid #e1e7ec !important;
        display: table-cell;
        width: 65%;
        padding: 15px;
        vertical-align: middle;
    }



    .card-img-tiles .thumblist>img {
        display: block;
        width: 100%;
        margin-bottom: 6px;
    }
    .btn-group-sm>.btn, .btn-sm {
        padding: .45rem .5rem !important;
        font-size: .875rem;
        line-height: 1.5;
        border-radius: .2rem;
    }
</style>

@section('content')

    <div class="row" x-data="cart">
        <div class="col-lg-4">
            <div class="row">
                <div class="col-lg-12 m-b-10">
                    <div class="card p-2">
                        <div class="card-body">
                            <h4>Customer</h4>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="card p-2">
                        <div class="card-body">
                            <h4>Cart</h4>
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>{{__("Produit")}}</th>
                                    <th>{{__("P.U")}}</th>
                                    <th>{{__("Qté")}}</th>
                                    <th>{{__("Montant")}}</th>
                                </tr>
                                </thead>

                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="row">
                <div class="col-lg-12 m-b-10">
                    <div class="card">
                        <div class="card-body">
                            <h5>Products</h5>

                            <div class="row" x-data="{products: {{$products}} }">
                                <template x-for="product in products" :key="product.id">

                                    <div class="col-lg-4 col-xl-3 col-md-6">
{{--                                        <div class="product-fruit-wrapper mb-60">--}}
{{--                                            <div class="product-fruit-img">--}}
{{--                                                <img :src="`${product.image}`" :alt="product.name">--}}
{{--                                                <div class="product-furit-action">--}}
{{--                                                    <a wire:click.prevent="addToCart(product)"--}}
{{--                                                       class="furit-animate-left" title="Add To Cart">--}}
{{--                                                        <i class="fas fa-shopping-cart"></i>--}}
{{--                                                    </a>--}}
{{--                                                    <a wire:click.prevent="addToWishList(product)"--}}
{{--                                                       class="furit-animate-right" title="Wishlist">--}}
{{--                                                        <i class="fas fa-heart"></i>--}}
{{--                                                    </a>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                            <div class="product-fruit-content text-center">--}}
{{--                                                <h4 x-text="product.name">--}}
{{--                                                </h4>--}}
{{--                                                <span x-text="formatNumber(product.price)"></span>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}

{{--                                        <div class="card mb-30">--}}
{{--                                            <a class="card-img-tiles" href="#" data-abc="true">--}}
{{--                                                <div class="inner">--}}
{{--                                                    <div class="main-img">--}}
{{--                                                        <img :src="`${product.image}`" :alt="product.name">--}}
{{--                                                    </div>--}}
{{--                                                    <div class="thumblist"><img src="https://i.imgur.com/ILEU18M.jpg" alt="Category"><img src="https://i.imgur.com/2kePJmX.jpg" alt="Category"></div>--}}
{{--                                                </div>--}}
{{--                                            </a>--}}
{{--                                            <div class="card-body text-center">--}}
{{--                                                <h4 class="card-title" x-text="product.name"></h4>--}}
{{--                                                <p class="text-muted" x-text="product.files"></p>--}}
{{--                                                <a class="btn btn-outline-primary btn-sm" href="#" data-abc="true">View Products</a>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
                                        <div class="product-card" >
                                            <div class="badge">Hot</div>
                                            <div :class="(1 === 1) ? 'product-tumbs' :''">


{{--                                                <img x-show="product.files.length === 1" :src="`${product.image}`" :alt="product.name">--}}
                                                <div x-show="product.files.length === 1" class="card-img-tiles" data-abc="true">
                                                    <div class="inner">
                                                        <div class="main-img">
                                                            <img :src="`${product.image}`" :alt="product.name">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div x-show="product.files.length >= 2" class="card-img-tiles" data-abc="true">
                                                    <div class="inner">
                                                        <div class="main-img">
                                                            <img :src="`${product.image}`" :alt="product.name">
                                                        </div>
                                                        <div class="thumblists bg-success" >
                                                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                                                <!-- Indicators -->
                                                                <ol class="carousel-indicators">
                                                                    <template x-for="(file,index) in product.files" :key="index">
                                                                        <li data-target="#myCarousel" :data-slide-to="index" :class="(index === 0 ) ? 'active' : ''"></li>
                                                                    </template>
                                                                </ol>

                                                                <div class="carousel-inner">
                                                                    <template x-for="(file,index) in product.files" :key="index">
                                                                        <div class="carousel-item" :class="(index === 0 ) ? 'active' : ''">
                                                                            <img :src="`${file}`" style="width: 40px; height: 40px" :alt="product.name+index">
                                                                        </div>
                                                                    </template>
                                                                </div>
                                                                <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
                                                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                    <span class="sr-only">Previous</span>
                                                                </button>
                                                                <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
                                                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                    <span class="sr-only">Next</span>
                                                                </button>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="product-details p-2">
                                                <strong class="fs-12 text-uppercase" x-text="product.name"></strong>
{{--                                                <p class="fs-1" x-text="product.description"></p>--}}
                                                <div class="product-bottoms-details">
                                                    <div class="product-prices">
                                                        <strike class="fs-10">$96.00</strike>
                                                        <strong x-text="formatNumber(product.price,'{{getSettingsOf('currency')}}')"></strong>
                                                    </div>
                                                    <small class="product-catagory m-b-5">Women,bag</small>
                                                    <div class="product-linksd">
                                                        <a href=""><i class="fa fa-heart"></i></a>
                                                        <a href=""><i class="fa fa-shopping-cart"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
{{-- @push('js') --}}
    <script >
        document.addEventListener('alpine:init', () => {
            Alpine.store('tabs', {
                current: 'first',
                items: ['first', 'second', 'third'],
            });
            Alpine.data('cart', () => ({
                timer: null,
                counter: 0,
                init() {
                    alert('id')
                    // Register an event handler that references the component instance
                    this.timer = setInterval(() => {
                        console.log('Increased counter to', ++this.counter);
                    }, 1000);
                },
                destroy() {
                    // Detach the handler, avoiding memory and side-effect leakage
                    clearInterval(this.timer);
                },
                items : [],

                count : this.items.length,

                setItems (items){
                    localStorage.setItem("cart",JSON.stringify(items))
                    this.items = JSON.parse(localStorage.getItem("cart"))
                },

                find : (id) => this.items.filter( item => (item.id === id)),

                total : () => this.items.map(item => item.amount) ,

                addToCart(item){
                    console.log(item)
                    const items = this.items;
                    const product = this.find(item.id)
                    if (product){
                        this.update(product.id,product.qty++)
                    }else{
                        items.push(item)
                    }
                   this.setItems(items)
                },
                update (id, qty){
                    const items = this.items;
                    for (const item in items) {
                        if (item.id === id) {
                            item.qty = qty
                        }
                    }
                    this.setItems(items)

                },
                remove (id){
                   const items = this.items;
                   items.remove(item => item.id === id);
                   this.setItems(items)
                }
            }));
        })
    </script>
{{-- @endpush --}}