@extends('layouts.site')
@section('title')
{{ $products->title ?? '404 Not Found' }}
@endsection
@section('facebook_meta')
<meta name="keywords" content="{{ $products->keywords ?? '404 Not Found' }}"/>
<meta name="description" content="{{ $products->desc ?? '404 Not Found' }}"/>
 <link rel="canonical" href="{{ route('site.product-detail',$products->pro_slug ?? '404 Not Found')}}" /> 
@endsection
@section('site')
<div role="main" class="main">
    <section
        class="page-header-modern custom-page-header bg-color-primary"data-bg-src="{{ asset('assets/img/demos/business-consulting-3/backgrounds/background-5.jpg.jpg') }}"
        style="background-size: cover; background-position: center;">
        <div class="container container-xl-custom py-4">
            <div class="row">
                <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                    <h4 class="font-weight-extra-bold text-12 appear-animation"
                        data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200"
                        style="color:white;">Product Detail</h4>
                </div>
                <div class="col-md-4 order-1 order-md-2 align-self-center">
                    <ul class="breadcrumb d-block text-md-end breadcrumb-light appear-animation"
                        data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                        <li><a href="{{ route('home') }}">Home</a></li>
                        <li class="active">Product Detail</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <div class="container pt-4 pb-5 mb-5">
        <div class="row">
            <div class="col">
            </div>
        </div>

        <div class="row">
            <div class="col-md-5 order-md-2 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInLeftShorter">
                <img src="{{ asset('storage/uploads/product') . '/' . ($products->image ?? '404 Not found.jpg') }}" class="img-fluid" alt="">
            </div>
            <div class="col-md-7 order-2">
                <div class="overflow-hidden">
                    <h2 class="text-color-dark font-weight-bold text-8 mb-0 pt-0 mt-0 appear-animation"
                        data-appear-animation="maskUp" data-appear-animation-delay="300">{{ optional($products)->name ?? '404 Not Found' }}</h2>
                </div>
                <div class="overflow-hidden mb-3">
                    <p class="font-weight-bold text-primary text-uppercase mb-0 appear-animation"
                        data-appear-animation="maskUp" data-appear-animation-delay="500">{{ optional($products)->name ?? '404 Not Found' }}</p>
                </div>
                <p class="font-weight-medium text-4-5 line-height-5 appear-animation"
                    data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">{!! $products->description ?? 'Default Title' !!}</p>
                <p class="text-4 appear-animation" data-appear-animation="fadeInUpShorter"
                    data-appear-animation-delay="800">{!! $products->sub_description ?? 'Default Title' !!}</p>
                <div class="row align-items-center appear-animation" data-appear-animation="fadeInUpShorter"
                    data-appear-animation-delay="1000">
                    <div class="col-lg-6">
                        <a href="tel:+91 7016892290" class="btn btn-modern btn-dark mt-3">Product Call Now</a>
                    </div>
                    <div class="col-sm-6 text-lg-end my-4 my-lg-0">
                        <strong class="text-uppercase text-1 me-3 text-dark">follow me</strong>
                        <ul class="social-icons social-icons-clean float-lg-end">
                            <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank"
                                    title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                            <li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank"
                                    title="Twitter"><i class="fab fa-twitter"></i></a></li>
                            <li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank"
                                    title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection