@extends('adminlayout.admin')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="nk-block-head nk-block-head-sm">
                <div class="nk-block-between">
                    <div class="nk-block-head-content">
					
                        <h3 class="nk-block-title page-title">{{$cat}} List</h3>
                        
                        </div>
                      <div class="nk-block-head-content">
                        <a href="{{route('dashboard')}}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Back</span></a>
                        <a href="{{route('dashboard')}}" class="btn btn-icon btn-outline-light bg-white d-inline-flex d-sm-none"><em class="icon ni ni-arrow-left"></em></a>
                    </div>  
                    </div><!-- .nk-block-head-content -->
                </div><!-- .nk-block-between -->
            </div><!-- .nk-block-head -->
			
            <div class="nk-block nk-block-lg">
                <div class="row g-gs">
				@if(count($products))
                    @php $i=1; @endphp
					
                    @foreach ($products as $data)
                    @php
                    $bgcolor = '';
                        if($i%4==0) {
                            $bgcolor = 'bg-warning';
                        } elseif($i%2==0) {
                            $bgcolor = 'bg-success';
                        } elseif($i%3==0) {
                            $bgcolor = 'bg-info';
                        } else {
                            $bgcolor = 'bg-primary';
                        }
                    @endphp
                    <div class="col-sm-6 col-lg-4">
                        <div class="card card-bordered {{ $bgcolor }}">
                            <div class="card-inner">
                                <div class="team">
                                    <div class="lg bg-light text-center">
                                        <img src="{{ url($data->image) }}" style="height: 125px; width: 100%; max-width: 220px;" alt="">
										<span class="{{ $data->type }}-type">{{ ucfirst($data->type) }}</span>
                                    </div>
                                    <div class="user-info text-center" style="margin: 1.15rem 0 0 !important;">
                                        <h6>{{ $data->name }}</h6>                                      
                                    </div>
                                    
                                    <ul class="team-info">
                                       
                                      <li><span class="text-white">Price </span><span class="text-white">{{ $data->price }} &#8377;</span></li>
                                      <li><span class="text-white">Ram </span><span class="text-white">{{ $data->ram }}</span></li>
                                      <li><span class="text-white">Storage </span><span class="text-white">{{ $data->internal_storage }}</span></li>
                                      <li><span class="text-white">Brand </span><span class="text-white">{{ $data->brand }}</span></li>
                                       
                                   
                                    </ul>
                                    <div class="team-view">
                                      <a href="{{ route('product_details', [$data->id]) }}" class="btn btn-block btn-dim btn-primary"><span>View Detail</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @php $i++; @endphp
                    @endforeach
					
				@else
					<p style="text-align: center;width: 100%;">No product found.</p>
                @endif					
					
                </div>
            </div><!-- .nk-block -->
        </div>
    </div>
</div>

<style>
.itrtaxlink{
	 font-weight: bold;
    margin-left: 46px;
    font-size: 15px;
}
.new-type{
    position: absolute;
    height: 50px;
    width: 50px;
    background: #00ff80;
    color: #fff;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    top: -48px;
}
.old-type{
    position: absolute;
    height: 50px;
    width: 50px;
    background: #ef3e06;;
    color: #fff;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    top: -48px;
}
</style>

@endsection