@extends('layouts.main')
@section('style')
<!--Swiper slider css-->
<link href="assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
<!-- jsvectormap css -->
<link href="assets/libs/jsvectormap/jsvectormap.min.css" rel="stylesheet" type="text/css" />
<style>
    .product-card-table {
        width: 100%;
        font-size: clamp(0.7rem, 0.9vw, 0.85rem);
        table-layout: fixed;
    }

    .product-card-table th,
    .product-card-table td {
        padding: 0.25rem;
        white-space: normal;
        word-wrap: break-word;
        overflow: visible;
        line-height: 1.3;
    }

    .product-card-table td:last-child {
        text-align: right;
    }

    .shipping-icon {
        font-size: clamp(1.1rem, 1.3vw, 1.4rem);
        flex-shrink: 0;
    }

    #spec_shipment td:first-child {
        width: 15%;
        vertical-align: top;
    }

    #spec_shipment td:last-child {
        width: 85%;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shipping-text {
        font-size: clamp(0.7rem, 0.9vw, 0.85rem);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card-footer {
        padding: 0.75rem;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }

    .card-footer .btn {
        flex: 0 1 auto;
        min-width: auto;
        padding: 0.375rem 0.75rem;
    }

    .ribbon-box.card {
        height: 450px !important;
    }

    @media (max-width: 576px) {
        .btn-text {
            display: none;
        }

        .btn i {
            margin: 0 !important;
        }

        .card-footer {
            padding: 0.5rem;
            gap: 0.25rem;
        }

        .card-footer .btn {
            padding: 0.25rem 0.5rem;
        }

        .ribbon-box.card {
            height: 400px !important;
        }
    }
</style>
@endsection

@section('content')
@include('pages.home.modal')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            @if($is_mobile && isset($categories))
            <select name="category" class="form-control" id="category">
                <option value="semua-produk">Semua Produk</option>
                @foreach($categories as $k => $v)
                <option value="{{ $v->slug }}" {{ $category == $v->slug ? 'selected=selected' : '' }}>{{ $v->name }}</option>
                @endforeach
            </select>
            @else
            <h4 class="mb-sm-0">Beranda</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Reseller</a></li>
                    <li class="breadcrumb-item active">Beranda</li>
                </ol>
                @endif
            </div>
        </div>
    </div>
    @include('components.message')
    <div class="row">
        <div class="col-xxl-12">
            <div class="card">
                <div class="card-body">
                    <!-- Nav tabs -->
                    @if(isset($categories) && !$is_mobile)
                    <ul class="nav nav-pills nav-primary mb-3" role="tablist">
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link {{ $category == 'semua-produk' ? 'active' : '' }}" href="{{ route('home', ['category' => 'semua-produk']) }}" role="tab">Semua Produk</a>
                        </li>
                        @foreach($categories as $k => $v)
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link {{ $category == $v->slug ? 'active' : '' }}" href="{{ route('home', ['category' => $v->slug]) }}" role="tab">{{ $v->name }}</a>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                    <!-- Tab panes -->
                    <div class="tab-content text-muted">
                        <div class="tab-pane active" id="home-1" role="tabpanel">
                            @if(isset($products) && count($products)>0)
                            <div class="row">
                                @foreach($products as $k => $v)
                                <!-- <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"> -->
                                <div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-2">
                                    <div class="card ribbon-box border shadow-none mb-lg-0 right material-shadow">
                                        <div style="position: relative; padding-top: 100%; overflow: hidden;">
                                            <img class="card-img-top" src="{{ asset($v->photo) }}" alt="Card image cap" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                        </div>
                                        <div class="card-body">
                                            <p style="min-height: 40px!important;">
                                                @if($is_mobile)
                                                {{ \Illuminate\Support\Str::limit($v->name ?? '-', 30, '...') }}
                                                @else
                                                {{ \Illuminate\Support\Str::limit($v->name ?? '-', 30, '...') }}
                                                @endif
                                            </p>
                                            @if($v->stock==0)
                                            <div class="ribbon-two ribbon-two-danger"><span>Stok Habis</span></div>
                                            @endif
                                            <table width="100%" id="spec_pricing" class="product-card-table">
                                                <tr>
                                                    <th>Harga</th>
                                                    <td>&nbsp;</td>
                                                    <th style="text-align: right;">Min.Qty</th>
                                                </tr>
                                                <tr>
                                                    <td class="text-primary">{{ number_format($v->sell_price) }}</td>
                                                    <td>&nbsp;</td>
                                                    <td style="text-align: center;">{{ number_format($v->minimum_order) }}</td>
                                                </tr>
                                            </table>
                                            <br>
                                            <table width="100%" id="spec_shipment" class="product-card-table">
                                                <tr>
                                                    <td style="width: 20%;text-wrap: wrap!important;"><i class="ri-truck-line me-2 align-middle shipping-icon text-warning fs-2"></i></td>
                                                    <td class="shipping-text" style="text-wrap: wrap!important;">
                                                        @if($v->shipping_method=="INTERNAL")
                                                        {{ \Illuminate\Support\Str::limit($v->shipping_coverage ?? '-', 15, '...') }}
                                                        @else
                                                        Seluruh wilayah
                                                        @endif
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="card-footer">
                                            <center>
                                                @if($v->stock >0)
                                                <a href="{{ route('home.checkout', ['id'=> $v->id]) }}" class="btn btn-success mb-0 btn-sm">{{ $is_mobile ? '' : 'Beli' }}<span class="btn-text"> </span><i class="ri-shopping-cart-2-fill ms-1 align-middle lh-1"></i></a>
                                                <a href="javascript:void(0);" class="btn btn-warning link-toko mb-0 btn-sm" data-bs-toggle="modal" data-id="{{ $v->id }}" data-bs-target="#linkModal">{{ $is_mobile ? '' : 'Link' }}<span class="btn-text"> </span><i class="ri-store-3-fill ms-1 align-middle lh-1"></i></a>
                                                @else
                                                <a href="javascript:void(0);" class="btn btn-outline-danger mb-0 btn-sm">{{ $is_mobile ? 'Habis' : 'Habis' }} <i class="ri-shopping-bag-line ms-1 lh-1"></i></a>
                                                @endif
                                            </center>
                                        </div>
                                    </div><!-- end card -->
                                </div><!-- end col -->
                                @endforeach
                            </div>
                            @else
                            <div class="noresult">
                                <div class="text-center">
                                    <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
                                    <h5 class="mt-2">Maaf data tidak ditemukan</h5>
                                    <p class="text-muted">Supplier belum menambahkan data pada kategori ini.</p>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div><!-- end card-body -->
            </div><!-- end card -->
        </div>
        <!--end col-->
    </div>
    @endsection

    @section('script')
    <script src="assets/libs/swiper/swiper-bundle.min.js"></script>
    @include('pages.home.script')
    @endsection