@php
    $brand = $dataConfigs['brand'] ?? 'default';
@endphp
@extends('student.layouts.app')
@push("styles")
<style>
    .card-img-top {
        height: 10vw;
        object-fit: cover;
    }

    .card {
        width: 100%;
    }

    .tx-color {
        color: var(--color);
    }

    .rounded {
        background-color: var(--primary-bg-color);
        color: white;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    @media only screen and (max-width: 767px) {
        .card-img-top {
            height: 25vw;
            object-fit: cover;
        }
    }

    @media only screen and (max-width: 575px) {
        .card-img-top {
            height: 45vw;
            object-fit: cover;
        }
    }


    /*.pricing {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
        margin: 0 auto 3em;
       
    }

    .pricing-item {
        position: relative;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: stretch;
        align-items: stretch;
        text-align: center;
        -webkit-flex: 0 1 330px;
        flex: 0 1 330px;
       
    }
    .pricing .pricing-item {
        overflow: hidden;
        height: 100%;
    }
    
    .pricing-action {
        color: inherit;
        border: none;
        background: none;
    }

    .pricing-action:focus {
        outline: none;
    }

    .pricing-feature-list {
        text-align: left;
    }

    .pricing-palden .pricing-item {
        font-family: 'Open Sans', sans-serif;
        cursor: default;
        color: var(--color);
        background: rgb(var(--bg2));
        box-shadow: 0 0 10px rgba(46, 59, 125, 0.23);
        border-radius: 20px 20px 10px 10px;
        margin: 1em;
    }

    @media screen and (min-width: 66.25em) {
        .pricing-palden .pricing-item {
            margin: 1em -0.5em;
        }

        .pricing-palden .pricing__item--featured {
            margin: 0;
            z-index: 10;
            box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
        }
    }

    .pricing-palden .pricing-deco {
        border-radius: 10px 10px 0 0;
        background: rgb(var(--primary-rgb));
        padding: 4em 0 9em;
        position: relative;
    }

    .pricing-palden .pricing-deco-img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 160px;
    }

    .pricing-palden .pricing-title {
        font-size: 0.75em;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 5px;
        color: #fff;
    }

    .pricing-palden .deco-layer {
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

    .pricing-palden .pricing-item:hover .deco-layer--1 {
        -webkit-transform: translate3d(15px, 0, 0);
        transform: translate3d(15px, 0, 0);
    }

    .pricing-palden .pricing-item:hover .deco-layer--2 {
        -webkit-transform: translate3d(-15px, 0, 0);
        transform: translate3d(-15px, 0, 0);
    }

    .pricing-palden .icon {
        font-size: 2.5em;
    }

    .pricing-palden .pricing-price {
        font-size: 5em;
        font-weight: bold;
        padding: 0;
        color: #fff;
        margin: 0 0 0.25em 0;
        line-height: 0.75;
    }

    .pricing-palden .pricing-currency {
        font-size: 20px;
        vertical-align: top;
    }

    .pricing-palden .pricing-period {
        font-size: 0.15em;
        padding: 0 0 0 0.5em;
        font-style: italic;
    }

    .pricing-palden .pricing__sentence {
        font-weight: bold;
        margin: 0 0 1em 0;
        padding: 0 0 0.5em;
    }

    .pricing-palden .pricing-feature-list {
        margin: 10px;
        margin-top: 130px;
        padding: 0.25em 0 2.5em;
        list-style: none;

    }

    .pricing-palden .pricing-feature {
        padding: 1em 0;
    }

    .pricing-palden .pricing-action {
        font-weight: bold;
        margin: auto 3em 2em 3em;
        padding: 1em 2em;
        color: var(--color);
        border-radius: 30px;
        background: rgb(var(--secondary-rgb));
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .pricing-action a {
        color: var(--color4);
    }

    [data-theme-color=dark] .pricing-action a {
        color: black;
    }

    .pricing-palden .pricing-action:hover,
    .pricing-palden .pricing-action:focus {
        background-color: rgb(var(--primary-rgb));
        color: var(--color);
    }

    .pricing-palden .pricing-item--featured .pricing-deco {
        padding: 5em 0 8.885em 0;
    } */

    .imgs {
        position: absolute;
        top: 160px;
        width: 100%;

    }
    
.ali{
    /* height:310px; */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.txt{
   display: flex;
   flex-direction: column;
   margin-left: 28px;
}
</style>
@endpush
@section('titlePage', 'Market Place')
@section('content')
<script>
    document.getElementById("kts").classList.add("is-expanded");
    document.getElementById("ktss-7").classList.add("active");
    document.getElementById("products").classList.add("active");
</script>
<div class="left-content mt-3">
    <h5 class="breadcrumb-item active font-weight-bold">MARKET PLACE</h5>
</div>
<div class="row">
    <div class="col-12">
        @include('common.alert')
        <div class="card">
            <div class="p-3">
                <form method="GET" id="form">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="title" value="{{request()->get('title')}}" name="title" class="form-control" placeholder="Search Title" title="Title">
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-secondary float-right reset"><i class="fa fa-times"></i>  Reset</button>
                            <button class="btn btn-primary float-right search"><i class="fa fa-search"></i>  Search</button>
                        </div>
                    </div>
                </form>
            </div> 
            <div class="card-body">
                <div class="row ">
                    @foreach ($data as $item)
                    @php
                    $company_tags='<li class="mb-1 tx-14 tx-primary">';
                        $type=$item->model;
                        if($type=="test"){
                        $type="Test";
                        }elseif($type=="courses"){
                        $type="Course";
                        }elseif($type=="test-series"){
                        $type="Test Series";
                        }elseif($type=="study-guide"){
                        $type="Study Guide";
                        }
                        @endphp
                       
                        <div class="col-xl-4 col-md-12 ">

                              <div class="card">        
                                    <div>
                                        <img class="card-img-top" style="height:200px;" src="{{ env('S3_PATH') .'/default/student_course/'.$brand.'.png' }}" alt="{{$item->title}}">                                      			
                                    </div>
                                    <div class="card-body">
                                        <div class="ali">
                                    <ul class="list-unstyled mb-2">
                                    <span class="badge badge-secondary badge-md pos-absolute t-15 r-15 product-badge">{{round((($item->price - $item->selling_price)/$item->price)*100,2)}}% off</span>
                                        <li class="text-center"><span class=" mb-3 tx-22 tx-primary">{{$item->title}}</span></li>
                                       <li class="mb-3 tx-14 tx-secondary"><span class="rounded"><i class="fa fa-check  tx-10"></i></span><span class="ms-2">{{$type}}</span></li> 
                                       @if($type!="Study Guide")
                                        <li class="mb-3 tx-14 tx-secondary"><span class="rounded"><i class="fa fa-check tx-10"></i></span><span class="ms-2">Price: INR <span style="text-decoration-line: line-through">{{$item->price}}</span>  {{$item->selling_price}}</span></li>
                                        <li class="mb-3 tx-14 tx-secondary"><span class="rounded"><i class="fa fa-check  tx-10"></i></span><span class="ms-2">Validity : {{$item->validity}} Days</span></li>
                                        <p class="tx-secondary "><span class="rounded"><i class="fa fa-check  tx-10"></i></span><span class="ms-2">Description :<span class="tx-color txt"> {{words_limit($item->description, 10)}}</span></span></p>
                                        @endif
                                 {{-- @if($item->att!="" && $item->model!="study-guide")
                                        <li class="">Skill: <small>{{preg_replace('/,/', ', ', $item->att)}}</small></li>
                                        @endif
										@if($item->c_att!="")
                                        <li class="">Company: <small>{{preg_replace('/,/', ', ', $item->c_att)}}</small></li>
										@endif --}}
                                        {{-- <p class="card-text">{{words_limit($item->description, 30)}}</p> --}}
                                    </ul>
                                    <div class="tx-center btn-rounded mts-auto">
                                    @if($item->model=="study-guide")
                                        <a href="{{ _route('student.learning-content.detail', $item->att) }}" class="btn btn-primary-light btn-block">Read More</a>
                                        @else
                                        <a href="{{_route('student.market-place.detail', [$item->id, $item->model])}}" class="btn btn-primary-light btn-block ">Read More</a>
									@endif
                                    </div>
                                        </div>
                                </div>
                            </div> 


                          {{-- <div class="pricing pricing-palden ">
                                <div class="pricing-item ">
                                    <div class="pricing-deco">
                                        <svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
                                            <path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                    c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
                                            <path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                    c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
                                            <path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                    H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
                                            <path class="deco-layer deco-layer--4 relative" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                    c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffff"></path>
                                        </svg>
                                        <div class="pricing-price"><span class="pricing-currency" style="text-decoration-line: line-through">
                                                {{$item->price}}<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
                                                    <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z" />
                                                </svg></span>
                                            {{$item->selling_price}}<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
                                                <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z" />
                                            </svg>
                                            <span class="pricing-period"></span>
                                        </div>
                                        <h3 class="pricing-title"></h3>
                                    </div>
                                    <div class="imgs">
                                        <img class="card-img-top" style="height:200px;" src="{{asset('assets/coursee-01.png')}}" alt="{{$item->title}}">

                                    </div>
                                    <ul class="pricing-feature-list ">
                                        <li class="text-center"><span class=" mb-3 tx-22 tx-primary">{{$item->title}}</span></li>
                                        <li class="mb-3 tx-14 tx-color"><span class="rounded"><i class="fa fa-check  tx-10"></i></span><span class="ms-2">{{$type}}</span></li>
                                        @if($type!="Study Guide")
                                        
                                        <li class="mb-3 tx-14 tx-color"><span class="rounded"><i class="fa fa-check  tx-10"></i></span><span class="ms-2">Validity :</span></li>
                                        <p class="tx-secondary"><span class="rounded"><i class="fa fa-check  tx-10"></i></span><span class="ms-2">Description:<span class="tx-color"> {{words_limit($item->description, 10)}}</span></span></p>
                                        @endif
                                        
                                    </ul>
                                    <button class="pricing-action">
                                        @if($item->model=="study-guide")
                                        <a href="{{ _route('student.learning-content.detail', $item->att) }}">Read More</a>
                                        @else
                                        <a href="{{_route('student.market-place.detail', [$item->id, $item->model])}}">Read More</a>
                                        @endif
                                    </button>
                                </div>
                               
                            </div> --}}


                        </div>
                        @endforeach
                </div>
                <div class="row">
                    @if($data instanceof \Illuminate\Pagination\LengthAwarePaginator )
                    {!! $data->links() !!}
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')
@endsection