@extends('layouts.public')
@section("meta")
    <title>{{__('header.packages')}} - {{config('app.name')}}</title>
    <meta name="description" content="{{__('header.gift_description')}}">
    <meta name="keywords" content="skinbar, packages, beauty packages, skincare packages, cosmetics">
    <meta property="og:title" content="{{__('header.packages')}}"/>
    <meta property="og:url" content="{{config("app.url")}}/packages"/>
    <meta property="og:image" content="/images/android-chrome-512x512.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="512">
    <meta property="og:image:height" content="512">
@endsection
@section('content')
    <section class="">
        <section class="">
            <div class="bg-body-secondary">
                <div class="container">
                    <nav class="py-4 lh-30px" aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center py-1">
                            <li class="breadcrumb-item"><a href="{{ __url('/') }}">{{ __('breadcrumb.home') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('header.packages') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </section>

        <div class="container container-xxl my-10">
            <div class="mb-13 text-center" data-animate="fadeInUp">
                <h2 class="mb-5 fw-200 ">{{ __("header.packages") }}</h2>
                <hr class="section-hr mb-10"/>
                <p class="mb-0 fs-16px fs-lg-18px mb-0 mw-xl-70 mw-lg-50 mw-md-100 ms-auto me-auto px-xl-5">{{ __("header.gift_description") }}</p>
            </div>
            <div class="row gy-50px">
                @foreach($items as $item)
                    <div class="col-12 col-sm-6 col-lg-4 d-flex">
                        <article class="card card-post-grid-1 bg-transparent border-0 shadow-1 rounded-4 overflow-hidden d-flex flex-column w-100" data-animate="fadeInUp">
                            <figure class="card-img-top position-relative mb-10" style="height: 300px; overflow: hidden;">
                                <a href="/packages/{{$item->id}}" class="hover-shine hover-zoom-in d-block h-100" title="">
                                    <img src="/storage/{{$item->image}}" class="img-fluid w-100 h-100 object-fit-cover" alt="{{___($item, "title")}}">
                                </a>
                            </figure>
                            <div class="card-body text-center px-md-9 py-0 d-flex flex-column justify-content-between flex-grow-1">
                                <h6 class="card-title lh-base mb-3">
                                    <a class="text-decoration-none" href="/packages/{{$item->id}}" title="{{___($item, "title")}}">{{___($item, "title")}}</a>
                                </h6>
                                <div class="mb-3">
                                    @if($item->original_price && $item->discount > 0)
                                        <span class="fs-18px text-body-emphasis fw-bold text-danger me-2">{{money($item->price)}}</span>
                                        <span class="fs-14px text-decoration-line-through text-muted me-2">{{money($item->original_price)}}</span>
                                        <span class="badge bg-success fs-12px fw-semibold">-{{$item->discount}}%</span>
                                    @else
                                        <span class="fs-18px text-body-emphasis fw-bold">{{money($item->price)}}</span>
                                    @endif
                                </div>
                                <ul class="post-meta list-inline lh-1 d-flex flex-wrap justify-content-center m-0 mb-3">
                                    <li class="list-inline-item">{{$item->duration }} {{__("month")}}</li>
                                </ul>
                                <p class="fs-14px mb-0">{{ mb_substr(___($item, "excerpt") , 0, 100)}}...</p>
                            </div>
                            <div class="mt-10 p-10 text-center">
                                <button href="#"
                                   data-id="{{$item->id}}"
                                   data-item="package"
                                   class="to-cart btn btn-primary w-100 mb-3">{{ __('public.add_cart') }} ({{money($item->price)}})
                                </button>                               
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>

    </section>
@endsection