@extends('layouts.admin')

@section('container')
    <div class="main-container container-fluid">

        <!-- PAGE-HEADER -->
        <div class="page-header">
            <h1 class="page-title">{{ $title }}</h1>
            <div>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ $title }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">List</li>
                </ol>
            </div>
        </div>
        <!-- PAGE-HEADER END -->

        <!-- ROW-1 OPEN -->
        <div class="row row-cards">
            <div class="col-xl-3 col-lg-4">
                <div class="row">
                    <div class="col-md-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">Categories</div>
                            </div>
                            <div class="card-body">
                                <label class="custom-control custom-radio mb-0 mt-1">
                                    <input type="radio" class="custom-control-input" name="category_id" value="All"
                                        {{ isset($category) && $category == 'All' ? 'checked' : '' }}>
                                    <span class="custom-control-label">All</span>
                                </label>
                                @foreach ($categories as $c)
                                    <label class="custom-control custom-radio mb-0 mt-1">
                                        <input type="radio" class="custom-control-input" name="category_id"
                                            value="{{ $c->id }}"
                                            {{ isset($category) && $c->name == $category ? 'checked' : '' }}>
                                        <span class="custom-control-label">{{ $c->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                        {{-- <div class="card">
                            <div class="card-header">
                                <div class="card-title">Price Range</div>
                            </div>
                            <div class="card-body">
                                <label class="custom-control custom-radio mb-0 mt-1">
                                    <input type="radio" class="custom-control-input" name="price_range" value="option1"
                                        checked>
                                    <span class="custom-control-label">All</span>
                                </label>
                                <label class="custom-control custom-radio mb-0 mt-1">
                                    <input type="radio" class="custom-control-input" name="price_range" value="option1">
                                    <span class="custom-control-label">Up to $500</span>
                                </label>
                                <label class="custom-control custom-radio mb-0 mt-1">
                                    <input type="radio" class="custom-control-input" name="price_range" value="option1">
                                    <span class="custom-control-label">$500 - $1000</span>
                                </label>
                                <label class="custom-control custom-radio mb-0 mt-1">
                                    <input type="radio" class="custom-control-input" name="price_range" value="option1">
                                    <span class="custom-control-label">$1000 - $1500</span>
                                </label>
                                <label class="custom-control custom-radio mb-0 mt-1">
                                    <input type="radio" class="custom-control-input" name="price_range" value="option1">
                                    <span class="custom-control-label">Over $2000</span>
                                </label>
                                <div class="d-flex">
                                    <div class="card-body px-0">
                                        <div id="mySlider"></div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
            <!-- COL-END -->
            <div class="col-xl-9 col-lg-8">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card p-0">
                            <div class="card-body p-4">
                                <div class="row">
                                    <div class="col-xl-5 col-lg-8 col-md-8 col-sm-8">
                                        <div class="input-group d-flex w-100 float-start">
                                            <input type="text" class="form-control border-end-0 my-2"
                                                placeholder="Search ...">
                                            <button
                                                class="btn input-group-text bg-transparent border-start-0 text-muted my-2">
                                                <i class="fe fe-search text-muted" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                                        <ul class="nav item2-gl-menu float-end my-2">
                                            <li class="border-end"><a href="#tab-11" class="show active"
                                                    data-bs-toggle="tab" title="List style"><i class="fa fa-th"></i></a>
                                            </li>
                                            <li><a href="#tab-12" data-bs-toggle="tab" class="" title="Grid"><i
                                                        class="fa fa-list"></i></a></li>
                                        </ul>
                                    </div>
                                    {{-- <div class="col-xl-3 col-lg-12">
                                        <a href="{{ route('web.admin.master-data.products.create') }}"
                                            class="btn btn-primary btn-block float-end my-2"><i
                                                class="fa fa-plus-square me-2"></i>New Product</a>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-11">
                        <div class="row">
                            @foreach ($products as $p)
                                <div class="col-md-6 col-xl-4 col-sm-6">
                                    <div class="card">
                                        <div class="product-grid6">
                                            <div class="product-image6 p-5">
                                                <ul class="icons">
                                                    <li><a href="{{ route('web.admin.master-data.products.edit', ['product' => $p->id]) }}"
                                                            class="bg-success text-white border-success border"><i
                                                                class="fe fe-edit"></i></a></li>
                                                </ul>
                                                <a href="{{ route('web.admin.master-data.products.edit', ['product' => $p->id]) }}"
                                                    class="bg-light">
                                                    <img class="img-fluid br-7 w-100"
                                                        src="{{ isset($p->cover) ? $p->cover->file_url : asset('assets/images/pngs/1.jpg') }}"
                                                        alt="img">
                                                </a>
                                            </div>
                                            <div class="card-body pt-0">
                                                <div class="product-content text-center">
                                                    <h1 class="title fw-bold fs-20"
                                                        style="-webkit-line-clamp: 2;line-clamp: 2;">
                                                        <a
                                                            href="{{ route('web.admin.master-data.products.edit', ['product' => $p->id]) }}">{{ $p->name }}</a>
                                                    </h1>
                                                    <div class="mb-2 text-warning">
                                                        {{-- <i class="fa fa-star text-warning"></i>
                                                        <i class="fa fa-star text-warning"></i>
                                                        <i class="fa fa-star text-warning"></i>
                                                        <i class="fa fa-star-half-o text-warning"></i>
                                                        <i class="fa fa-star-o text-warning"></i> --}}
                                                    </div>
                                                    <div>
                                                        @if ($p->price)
                                                            <span class="price"
                                                                @if (isset($p->price_promotion) && $p->price_promotion > 0) style="text-decoration: line-through;" @endif>{{ (int) $p->price }}
                                                            </span>
                                                            @if (isset($p->price_promotion) && $p->price_promotion > 0)
                                                                <br><span class="price">
                                                                    {{ $p->price_promotion }}
                                                                </span>
                                                            @endif
                                                        @else
                                                            <span class="">Harga tidak ada</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <div class="mb-5">
                                <div class="float-end">
                                    {{-- <ul class="pagination ">
                                        <li class="page-item page-prev disabled">
                                            <a class="page-link" href="javascript:void(0)" tabindex="-1">Prev</a>
                                        </li>
                                        <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li>
                                        <li class="page-item page-next">
                                            <a class="page-link" href="javascript:void(0)">Next</a>
                                        </li>
                                    </ul> --}}
                                    {{ $products->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-12">
                        <div class="row">
                            @foreach ($products as $p)
                                <div class="col-xl-12 col-lg-12 col-md-12">
                                    <div class="card overflow-hidden">
                                        <div class="card-body">
                                            <div class="row g-0">
                                                <div class="col-xl-3 col-lg-12 col-md-12">
                                                    <div class="product-list">
                                                        <div class="product-image">
                                                            <ul class="icons">
                                                                <li><a href="{{ route('web.admin.master-data.products.show', ['product' => $p->id]) }}"
                                                                        class="bg-primary border-primary border"><i
                                                                            class="fe fe-eye text-white "></i></a></li>
                                                                <li><a href="{{ route('web.admin.master-data.products.edit', ['product' => $p->id]) }}"
                                                                        class="bg-success border-success border"><i
                                                                            class="fe fe-edit text-white "></i></a></li>
                                                                <li><a href="{{ route('web.admin.master-data.products.destroy', ['product' => $p->id]) }}"
                                                                        class="bg-danger border-danger border"><i
                                                                            class="fe fe-x text-white"></i></a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="br-be-0 br-te-0">
                                                            <a href="shop-description.html" class=""> </a>
                                                            <img src="{{ asset('assets/images/pngs/1.jpg') }}"
                                                                alt="img" class="cover-image br-7 w-100">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6 col-lg-12 col-md-12 border-end my-auto">
                                                    <div class="card-body">
                                                        <div class="mb-3">
                                                            <a
                                                                href="{{ route('web.admin.master-data.products.show', ['product' => $p->id]) }}">
                                                                <h3 class="fw-bold fs-30 mb-3">{{ $p->name }}</h3>
                                                                {{-- <div class="mb-2 text-warning">
                                                                    <i class="fa fa-star fs-18 text-warning"></i>
                                                                    <i class="fa fa-star fs-18 text-warning"></i>
                                                                    <i class="fa fa-star fs-18 text-warning"></i>
                                                                    <i class="fa fa-star-half-o fs-18 text-warning"></i>
                                                                    <i class="fa fa-star-o fs-18 text-warning"></i>
                                                                </div> --}}
                                                            </a>
                                                            <p class="fs-16">{{ $p->description }}</p>
                                                            {{-- <form class="shop__filter">
                                                                <div class="row gutters-xs">
                                                                    <div class="col-auto">
                                                                        <label class="colorinput">
                                                                            <input type="checkbox" name="color"
                                                                                value="azure" class="colorinput-input"
                                                                                checked>
                                                                            <span class="colorinput-color bg-azure"></span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="col-auto">
                                                                        <label class="colorinput">
                                                                            <input type="checkbox" name="color"
                                                                                value="indigo" class="colorinput-input">
                                                                            <span
                                                                                class="colorinput-color bg-indigo"></span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="col-auto">
                                                                        <label class="colorinput">
                                                                            <input type="checkbox" name="color"
                                                                                value="purple" class="colorinput-input">
                                                                            <span
                                                                                class="colorinput-color bg-purple"></span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </form> --}}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-3 col-lg-12 col-md-12 my-auto">
                                                    <div class="card-body p-0">
                                                        <div class="h3 text-center mb-5">
                                                            @if ($p->price)
                                                                <span class="price fw-bold"
                                                                    @if ($p->price_promotion > 0) style="text-decoration: line-through;" @endif>{{ (int) $p->price }}</span>
                                                                @if ($p->price_promotion > 0)
                                                                    <br><span
                                                                        class="price fw-bold">{{ (int) $p->price_promotion }}</span>
                                                                @endif
                                                            @else
                                                                <span class="">Harga tidak ada</span>
                                                            @endif
                                                        </div>
                                                        @if ($p->detail && $p->detail->link_shopee)
                                                            <a href="{{ $p->detail->link_shopee }}"
                                                                class="btn btn-primary btn-block"><i
                                                                    class="fe fe-shopping-cart me-2"></i>Link Shopee</a>
                                                        @endif
                                                        @if ($p->detail && $p->detail->link_tokopedia)
                                                            <a href="{{ $p->detail->link_tokopedia }}"
                                                                class="btn btn-primary btn-block"><i
                                                                    class="fe fe-shopping-cart me-2"></i>Link Tokopedia</a>
                                                        @endif
                                                        @if ($p->detail && $p->detail->link_bukalapak)
                                                            <a href="{{ $p->detail->link_bukalapak }}"
                                                                class="btn btn-primary btn-block"><i
                                                                    class="fe fe-shopping-cart me-2"></i>Link Bukalapak</a>
                                                        @endif
                                                        @if ($p->detail && $p->detail->link_lazada)
                                                            <a href="{{ $p->detail->link_lazada }}"
                                                                class="btn btn-primary btn-block"><i
                                                                    class="fe fe-shopping-cart me-2"></i>Link Lazada</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="mb-5">
                                <div class="float-end">
                                    {{-- <ul class="pagination ">
                                        <li class="page-item page-prev disabled">
                                            <a class="page-link" href="javascript:void(0)" tabindex="-1">Prev</a>
                                        </li>
                                        <li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">4</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0)">5</a>
                                        </li>
                                        <li class="page-item page-next">
                                            <a class="page-link" href="javascript:void(0)">Next</a>
                                        </li>
                                    </ul> --}}
                                    {{ $products->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- COL-END -->
            </div>
            <!-- ROW-1 CLOSED -->
        </div>
        <!-- ROW-1 END -->
    </div>
@endsection

@section('scripts')
    <script>
        $(".price").text(function(index, text) {
            console.log(`text.trim().toLocaleString('id') :>> `, parseInt(text.trim()).toLocaleString('id'));
            $(".price").eq(index).text(`Rp. ${parseInt(text.trim()).toLocaleString('id')}`);
        });
    </script>
@endsection