@extends('frontend.layouts.main')

@section('title','Write to CSV Pharmaceuticals for Quality, Process and Quotations')

@section('content')
    
    @php
        $categoryName = strtolower($category->category ?? '');
        //print_r($categoryName);die();
        $videoConfig = match ($categoryName) {
            'natural butters' => ['file' => 'natural butters.mp4', 'position' => 'top-50 start-50 translate-middle'],
            'absolute and concrete' => ['file' => 'absolute & concrete.mp4', 'position' => 'top-0 start-0'],
            'aromatic chemicals' => ['file' => 'Aromatic chemicals.mp4', 'position' => 'top-100 start-50 translate-middle-x'],
            'carrier oils' => ['file' => 'carrier oil.mp4', 'position' => 'carrier_oil'],
            'menthol and mint oils' => ['file' => 'menthol & mint oil.mp4', 'position' => 'carrier_oil'],
            'essential oils' => ['file' => 'ESSential oil.mp4', 'position' => 'essential_oil'],
            'spice oil & oleoresins' => ['file' => 'Spice & Oleoresins.mp4', 'position' => 'top-0 start-50 translate-middle-x'],
            'pine oils & its derivatives' => ['file' => 'pine & its derivatives.mp4', 'position' => 'top-0 start-50 translate-middle-x'],
            default => null,
        };
    @endphp
    
    <div class="theme-inner-banner" Agarbatti & incense>
        <div class="bg position-relative breadcrumb_banner" style="overflow: hidden;">
            <!-- Video background below -->
            <div class="bg position-relative" style="overflow: hidden;">
              @if($videoConfig)
                    <video autoplay muted loop playsinline
                           class="position-absolute {{ $videoConfig['position'] }} min-w-100 min-h-100"
                           style="object-fit: cover;width:100%">
                        <source src="{{ asset('/storage/videos/' . $videoConfig['file']) }}" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                @endif
            </div>
        </div>
        <div class="container">
            <div class="clearfix">
                <ul class="float-left">
                    <li><a href="{{  route('home') }}" class="tran3s">Home</a></li>
                    <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li>{{ $category->category }}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="shop-page">
        <div class="container">
            <div class="row" style="margin-bottom:20px">
                {!! $category->description  !!}
            </div>
            <div class="main-wrapper">
                <div class="col float-right all-product-wrapper shop-large-side">
                    <div class="row">
                        @foreach($products as $product)
                        <div class="col-sm-4 col-xs-6">
                            <div class="single-item">
                                <a href="{{ route('product-detail',['category_slug'=>$product->category_slug,'product_slug'=>$product->slug]) }}" class="tran3s"> 
                                    <img src="{{ asset($product->image) }}" title="{{ $product->product}}" alt="{{ $product->product}}" />
                                </a>
                                <h5><a href="{{ route('product-detail',['category_slug'=>$product->category_slug,'product_slug'=>$product->slug]) }}" class="tran3s">{{ $product->product}}</a></h5>
                                <div class="clearfix code-color"><strong class="float-left">{{$product->product_code}} </strong></div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="col float-right shop-sidebar">
                    <div class="shop-sidebar-list">
                        <ul>
                            @foreach($categories as $category)
                            <li>
                                <a href="{{ route('product-category',$category->slug) }}" class="tran3s">{{ $category->category}} <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
    /*.essential_oil{*/
    /*    position:relative;*/
    /*        top: -145px;*/
    /*}*/
    /*.carrier_oil{*/
    /*        position: relative;*/
    /*top: -214px;*/
    /*}*/
</style>
@endsection