@extends('layouts.front.app')
@section('meta')
	<title>Authorized Brands | {{ env('APP_NAME') }}</title>
@endsection

@section('css')
    <style>
        #owl.owl-carousel .owl-nav {
            text-align: center;
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
        }
        #owl.owl-carousel .owl-nav button.owl-prev,
        #owl.owl-carousel .owl-nav button.owl-next {
            color: gray;
            border: #fff solid 1px;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            background-color: #f7f9fc5c;
            margin: 0 5px;
        }
        #owl.owl-carousel .owl-nav button i{
            display: flex!important;
            justify-content: center!important;
            color: #fff;
        }


        .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
            font-weight: bold;
            color: #185691  !important;
            background-color: unset !important;
            border-left: #208de8 solid 7px !important;
        }


		@media (max-width: 767.98px) {
			.border-end{
				border: unset !important;
			}
		}

        .hp:hover{
            filter: grayscale(0) !important;
            cursor: pointer;
            box-shadow: 0px 0px 13px 1px #00000026;
        }
        .hp:hover img{
            filter: grayscale(0) !important;
        }
        .hp img{
            filter: grayscale(1)
        }
    </style>
@endsection

@section('content')

<div class="py-5" style="background-image: url('{{asset('images/banners/banner.jpg')}}'); background-repeat: no-repeat; background-size: cover; background-position-y: top;">
    <div class="container py-sm-5 py-0">
        <div class="row py-5">
            <div class="col text-center">
                <h1 class="text-white text-uppercase ">Authorized Brands</h1>
                <p class="text-white">Home / Authorized Brands</p>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="mb-5">
        <h3 class="fw-bolder text-secondary">Authorized Brands</h3>
        <div class="line-6-50 bg-secondary"></div>
    </div>
    <div class="row">
        @foreach ($brands as $brand)
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{ asset('uploads/partner/'.$brand->image) }}" alt="">
            </div>
        </div>
        @endforeach
        {{-- <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/rob-logo.png')}}" alt="">
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/ab-logo.png')}}" alt="">
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/des-logo.png')}}" alt="">
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/asianhome-logo.png')}}" alt="">
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/sm-logo.png')}}" alt="">
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/desmark-logo.png')}}" alt="">
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/fam-logo.png')}}" alt="">
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="border p-3 hp d-flex align-items-center justify-content-center" style="height: 250px; width 250px;">
                <img class="img-fluid" src="{{asset('images/brands/solidmark-logo.png')}}" alt="">
            </div>
        </div> --}}
    </div>
</div>

@include('include.testimonial')

@include('layouts.front.contact-footer')

@endsection

@section('js')
	<script>
		//Gets the video src from the data-src on each button    
        // let $videoSrc;  
        // $('.play-btn').click(function() {
        // 	$videoSrc = $(this).data( "src" );      
        // });
        // //console.log($videoSrc);  
        // // when the modal is opened autoplay it  
        // $('#modalVideo').on('shown.bs.modal', function (e) {
        // 	// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
        // 	$("#iframe").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1" ); 
        // })
		
        // // stop playing the youtube video when I close the modal
        // $('#modalVideo').on('hide.bs.modal', function (e) {
        // 	$("#iframe").attr('src',$videoSrc); 
        // })

        $(document).ready(function() {
            $("#testimonial-owl").owlCarousel({
                loop:true,
                autoPlay: true,
                nav : false, // Show next and prev buttons
                navText: [
                    "<i class='fa-solid fa-arrow-left'></i>",
                    "<i class='fa-solid fa-arrow-right'></i></i>"
                ],
                dots: false,
                dataDots: true,
                slideSpeed : 300,
                smartSpeed: 800,
                paginationSpeed : 400,
                responsive:{
                    0:{
                        items:1
                    },
                    576:{
                        items:2
                    }
        
                }
            });
        });
        
	</script>
@endsection