@extends('pages.layouts.panel')



@section('head')

    <title>Rumah Cuci Si Mamak - Product</title>

@endsection



@section('body')

    <div class="py-5">

        <div class="container">

            <div class="d-block mb-4">

                <h2 class="fw-bold mb-0">Paket Murah Laundry</h2>

                <p class="mb-0">Hemat waktu dan uang dengan paket laundry terbaik!</p>

            </div>



            <div class="d-block">

                <div id="owl-one" class="owl-carousel owl-theme owl-loaded">

                    <div class="owl-stage-outer">

                        <div class="owl-stage d-flex">

                            @foreach ($product as $index => $item)

                                <div class="owl-item d-flex align-self-stretch">

                                    <div class="card product-card">

                                        <div class="ratio ratio-4x3">

                                            <img src="/images/product/{{ $item->image }}" alt="{{ $item->image }}"

                                                class="object-to-fit">

                                        </div>

                                        <div class="card-body p-4">

                                                                <div class="card-price mb-3">
    @if ($item->discount != null && $item->discount > 0 && $item->dateDiscountEnd && strtotime(date('Y-m-d')) <= strtotime($item->dateDiscountEnd))
        {{-- Tampilan saat ada diskon yang masih berlaku --}}
        <div class="mb-2">
            <span class="text-decoration-line-through text-muted">Rp.
                {{ number_format($item->price) }}</span>
            <span class="badge bg-danger text-white ms-2">
                <i class="fas fa-tags me-1"></i>Diskon {{ $item->discount }}%
            </span>
        </div>
        <div class="d-flex align-items-end">
            <span class="fs-5 mb-1">Rp.</span>
            <span class="fw-bold fs-2 text-primary">{{ number_format($item->price_other) }}</span>
            <span class="fs-5 mb-1 text-muted">/Kg</span>
        </div>
    @else
        {{-- Tampilan saat tidak ada diskon atau diskon sudah berakhir --}}
        <div class="d-flex align-items-end" style="padding-top: 2rem">
            <span class="fs-5 mb-1">Rp.</span>
            <span class="fw-bold fs-2 text-primary">{{ number_format($item->price) }}</span>
            <span class="fs-5 mb-1 text-muted">/Kg</span>
        </div>
    @endif
</div>  
                                            <a href="{{ route('product.order', ['id' => $item->product_id, 'slug' => $item->slug]) }}"

                                                class="btn btn-outline-purple w-100 mb-4">

                                                <i class="fas fa-shopping-cart me-2"></i>Pilih Paket

                                            </a>

                                            <hr class="my-3">

                                            <div class="description-list">

                                                @foreach ($item->descriptionList as $items)

                                                    <div class="d-flex align-items-start gap-2 mb-2">

                                                        <i class="fas fa-check-circle text-purple mt-1"></i>

                                                        <span>{{ $items }}</span>

                                                    </div>

                                                @endforeach

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            @endforeach

                        </div>

                    </div>

                </div>

            </div>





        </div>

    </div>

@endsection



@section('script')

    <script>

        $('#owl-one').owlCarousel({

            // margin: 24,

            merge: true,

            autoWidth: true,

            dots: false,

            responsive: {

                0: {

                    loop: true,

                    margin: 18,

                    center: true,

                },

                768: {

                    margin: 24,

                },

            }

        });



        var owl = $('#owl-two');

        owl.owlCarousel({

            items: 1,

            loop: false,

            margin: 24,

            dots: false,

            autowidth: true,

            responsive: {

                480: {

                    items: 2

                },

                768: {

                    items: 2,

                },

                992: {

                    items: 4,

                },



            }

        })

        $('.customNextBtn').click(function() {

            owl.trigger('next.owl.carousel');

        })

        $('.customPrevBtn').click(function() {

            owl.trigger('prev.owl.carousel', [300]);

        })

    </script>

@endsection